CORS 策略 React 已阻止访问 XMLHttpRequest - Javascript

介绍

CORS (Cross-Origin Resource Sharing) 是一种授权机制，用于允许一个网站访问另一个网站的资源。React 使用了 CORS 策略，以确保安全性。

然而，有时候我们需要通过 XMLHttpRequest 进行跨域请求，这就需要做一些额外的设置，才能绕过 React 的 CORS 策略。如果不做设置，将会显示类似 "Access to XMLHttpRequest at 'http://example.com/resource' from origin 'http://localhost:3000' has been blocked by CORS policy" 的报错信息。

解决方案

1. 通过设置代理解决 CORS 问题

我们可以通过配置代理进行跨域请求。具体方法是在 package.json 文件里添加 "proxy" 字段，指定代理服务器的地址和端口。

{
  "proxy": "http://localhost:8080"
}

接下来，在 React 中使用相对路径进行请求，如 /resource，这样就会请求到 http://localhost:8080/resource 这个地址。

2. 使用 CORS Anywhere 解决 CORS 问题

CORS Anywhere 是一个 Node.js 代理服务器，通过它可以使请求绕过 CORS 策略。使用该方法需要搭建一个 Node.js 服务器，具体步骤如下：

1. 安装 CORS Anywhere。

npm install cors-anywhere

2. 创建一个 server.js 文件，添加如下代码。

const cors = require('cors-anywhere');

const host = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 8080;

cors.createServer().listen(port, host, () => {
  console.log(`CORS Anywhere is running on ${host}:${port}`);
});

3. 运行该服务器。

node server.js

4. 然后在 React 中使用 http://localhost:8080/ 这个地址进行请求即可。

3. 修改服务器的响应头来解决 CORS 问题

如果我们有权限修改目标服务器的代码，我们可以通过修改响应头来解决 CORS 问题。具体方法是在服务器端设置响应头。

在 Node.js 中，我们可以使用 Express 框架（或其他框架）来修改响应头。下面是一个例子：

const express = require('express');
const app = express();

app.get('/resource', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许跨域
  res.send('Hello, world!'); // 返回数据
});

app.listen(8080, () => {
  console.log('Server is running on port 8080');
});

上述代码中，我们在服务器端设置了响应头 Access-Control-Allow-Origin: *，允许任何来源跨域访问服务器的资源。

4. JSONP

JSONP (JSON with Padding) 是一种利用 HTML script 标签的加载行为，绕过 CORS 策略进行跨域请求的方法。

我们可以在服务器端返回如下的 JSON 数据：

{
  "message": "Hello, world!"
}

然后在客户端中使用 jQuery 的 AJAX 方法：

$.ajax({
  url: 'http://example.com/resource',
  dataType: 'jsonp',
  jsonpCallback: 'callback',
  success: data => {
    console.log(data.message);
  }
});

上述代码中，我们设置了 dataType: 'jsonp'，指示 AJAX 请求应该使用 JSONP 的方式进行。另外，我们指定了 callback 作为 JSONP 的回调函数，服务器端应该返回这个回调函数名。

我们还需要在服务器端添加如下代码，根据回调函数名生成合法的 JSONP 数据。

app.get('/resource', (req, res) => {
  const callback = req.query.callback;
  const data = { message: 'Hello, world!' };
  res.send(`${callback}(${JSON.stringify(data)})`);
});

总结

React 的 CORS 策略为开发者提供了一定的保障，但有时候需要绕过它进行跨域请求。本文介绍了几种方法，可以根据实际情况选择使用。