React cross-domain request solution: How to deal with cross-domain access issues in front-end applications, specific code examples are needed

In front-end development, we often encounter cross-domain requests Requested Questions. Cross-domain request means that the target address (domain name, port, protocol) of the HTTP request sent by the front-end application is inconsistent with the address of the current page. Due to the browser's same-origin policy, cross-domain requests are restricted. However, in real development, we often need to communicate with different servers, so the solution for cross-domain requests is particularly important.

This article will introduce the solution for React cross-domain requests and give specific code examples.

1. JSONP

JSONP is a solution for cross-domain requests. It takes advantage of the fact that the <script></script> tag has no cross-domain restrictions. The specific implementation steps are as follows:

1. In the front-end application, add a <script></script> tag and use the server URL as the value of its src attribute.
2. On the server side, process the request and return a function call, which serves as a callback function and passes data to the front-end application in the form of parameters.
3. After the front-end application loads the <script></script> tag, it can obtain the data returned from the server.

The following is a sample code:

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  window[callback] = function(data) {
    delete window[callback];
    document.body.removeChild(script);
    callback(data);
  };
  document.body.appendChild(script);
}

function fetchUserData() {
  jsonp('http://api.example.com/user', 'handleUserData');
}

function handleUserData(data) {
  // 處理從服務(wù)端返回的數(shù)據(jù)
}

fetchUserData();

2. CORS

CORS (Cross-Origin Resource Sharing) is a cross-domain request provided by the browser Solution, which implements permission control for cross-domain requests by adding specific fields in HTTP request headers. The following is a sample code for using CORS to make cross-domain requests:

fetch('http://api.example.com/user', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*' // 設(shè)置允許跨域的域名
  },
})
.then(response => response.json())
.then(data => {
  // 處理從服務(wù)端返回的數(shù)據(jù)
})
.catch(error => {
  console.error(error);
});

On the server side, you need to set the Access-Control-Allow-Origin field in the response header to specify the cross-domain access allowed domain name. If cross-domain access is allowed for all domain names, the value of this field can be set to *.

3. Use a reverse proxy

Another common way to solve the problem of cross-domain requests is to use a reverse proxy. The specific steps are as follows:

1. Open a proxy server locally and forward the request of the target server to the proxy server.
2. The proxy server then sends the request to the target server and returns the response to the front-end application.

In this way, requests sent by the front-end application can bypass the browser's same-origin policy and implement cross-domain requests.

The following is a sample code using a reverse proxy:

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({ target: 'http://api.example.com', changeOrigin: true }));

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

Through the above code, we forward the request starting with /api to http:// api.example.com.

Summary:

This article introduces three solutions for React cross-domain requests: JSONP, CORS and using reverse proxy. In actual development, according to specific application scenarios and requirements, you can choose an appropriate solution to handle cross-domain requests. I hope the content of this article will be helpful in solving React cross-domain request problems.

The above is the detailed content of React cross-domain request solution: how to deal with cross-domain access issues in front-end applications. For more information, please follow other related articles on the PHP Chinese website!