Implementation method of cors cross-domain request in fetch in react

This article mainly introduces the implementation method of cors cross-domain request in fetch in react. Now I share it with you and give you a reference.

React is used in the project, and fetch needs to be used instead of ajax.

Because react's create_react_app tool is very convenient, it can basically be used out of the box. After creating the project and entering the npm start command, it will automatically listen to a port 3000, and the front-end part is ready.

Specific reference: https://github.com/facebookincubator/create-react-app

I used phalcon for the backend part.

Due to the separation of the front-end and back-end, for convenience, I tried to make them the same domain in nginx (the top-level domain names of the front-end and back-end api are the same), but the phalcon framework is a single entry, and when react monitors 3000, it passes nginx reverse proxy, there was a problem that js could not be found, so I gave up the plan of the same domain.

So I configured two domain names:

1, www.xxx.com
2, data.xxx.com

The first domain name Used for the react part, the port number is 3000 (for debugging, officially launched is 80)
The second domain name is used for the api, the port number is 80

So cross-domain problems arise.

For a detailed introduction to cors, please see: http://www.jb51.net/article/102694.htm

The following are the settings in the PHP part that allow cross-domain domain name access

  $origin    = isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:'';
  $allowOrigin = [
            'http://www.xxx.com',
            'http://xxx.com'
          ];
  if (in_array($origin, $allowOrigin)) {
    header('Access-Control-Allow-Origin: ' . $origin);
  }

  header('Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS');
  header('Access-Control-Allow-Credentials: true');
  header('Access-Control-Allow-Headers: Content-Type, Accept');

The following is the ajax request for the fetch part

let postData = {a:'b'};
fetch('http://data.xxx.com/Admin/Login/login', {
  method: 'POST',
  mode: 'cors',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: JSON.stringify(postData)
}).then(function(response) {
  console.log(response);
});

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

Related articles:

iview date control, two-way binding date format method

Solve the time control selection in iView The problem of always missing one day

Detailed explanation based on the use of on-change attribute in IView

The above is the detailed content of Implementation method of cors cross-domain request in fetch in react. For more information, please follow other related articles on the PHP Chinese website!