CORS 标头“Access-Control-Allow-Origin”缺少 REACT

服务器

CORS（跨域资源共享）是一种用于解决跨域访问问题的机制。在Web开发中，当一个网页应用请求访问另一个源（域名、协议或端口）下的资源时，如果目标资源的响应头中没有包含特定的CORS标头，浏览器会阻止该请求。

其中一个常见的CORS标头是“Access-Control-Allow-Origin”。该标头用于指定允许访问资源的来源。如果服务器的响应中没有包含这个标头，浏览器会拦截请求并抛出一个错误。

然而，有时候在使用React框架开发应用时，我们可能会遇到一个问题：当我们向另一个源请求资源时，服务器的响应中缺少CORS标头，导致请求被阻止。这种情况下，我们需要手动添加CORS标头来允许跨域访问。

案例代码：

假设我们有一个React应用，需要从一个不同的域名下的API获取数据。在请求该API时，我们遇到了CORS问题，因为服务器的响应中没有包含“Access-Control-Allow-Origin”标头。

为了解决这个问题，我们可以使用Express.JS来创建一个简单的代理服务器。该服务器将接收React应用的请求，并将请求转发到目标API。在转发请求之前，我们可以手动为服务器的响应添加“Access-Control-Allow-Origin”标头，以允许跨域访问。

首先，我们需要安装Express.JS：

npm install express

然后，创建一个名为proxy-server.JS的文件，添加以下代码：

Javascript
const express = require('express');
const axIOS = require('axIOS');
const app = express();
const port = 3001;
app.use(express.JSon());
app.get('/api/data', async (req, res) => {
  try {
    const response = awAIt axIOS.get('https://api.example.com/data'); // 目标API的URL
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); // 允许跨域访问的来源，这里假设React应用运行在本地开发服务器上，端口为3000
    res.JSon(response.data);
  } catch (error) {
    console.error(error);
    res.status(500).send('Error');
  }
});
app.listen(port, () => {
  console.log(<code>Proxy server listening at http://localhost:${port}</code>);
});

以上代码创建了一个简单的Express应用，监听在本地的3001端口。当React应用发送GET请求到/api/data时，代理服务器会转发请求到目标API，并将目标API的响应添加上“Access-Control-Allow-Origin”标头后返回给React应用。

在React应用中，我们可以像发送请求到本地的代理服务器一样发送请求到目标API。这样，我们就可以绕过CORS限制，成功获取到目标API的数据。

：

在React开发中，当我们遇到服务器响应缺少CORS标头的问题时，可以通过搭建一个代理服务器并手动添加“Access-Control-Allow-Origin”标头来解决。这样，我们就能够顺利地进行跨域访问，并获取到需要的数据。