Access-Control-Allow-Origin: 处理 React 和 Express 中的 CORS 错误
Access-Control-Allow-Origin: 处理 React 和 Express 中的 CORS 错误
在你的 React 和/或 Express 应用中遇到这个错误了吗？
缺少 ‘
Access-Control-Allow-Origin’ 标头。
你违反了同源策略 – 它规定每个 AJAX 请求必须与你的网站具有完全相同的主机、协议和端口。可能导致这种情况的原因：
- 从本地文件访问服务器（从 file:///YourApp/index.html 到 http://api.awesome.com 的请求）
- 访问外部 API（从 http://yourapp.com 到 http://api.awesome.com 的请求）。
- 访问内部 API（从 http://yourapp.com 到 http://api.yourapp.com 的请求）。
- 在同一主机上访问不同的端口（Web 应用程序在 https://:3000 上，API 在 https://:4000 上）
- 从 https 请求 http，或反之亦然（从 http://yourapp.com 请求 https://yourapp.com）
需要明确的是，这不是 React 错误。它同样影响所有 Web 应用程序，并且我们将在下面看到的大部分修复方法实际上是修改服务器或浏览器。
如何修复它
以下是一些解决此问题的方法：
最佳：CORS 标头（需要修改服务器）
CORS（跨域资源共享）是服务器声明“我将接受你的请求，即使你来自不同的源”的一种方式。 这需要服务器的配合 – 因此，如果你无法修改服务器（例如，如果你使用的是外部 API），则此方法将不起作用。
修改服务器以添加标头 Access-Control-Allow-Origin: * 以允许来自任何地方的跨域请求（或者指定一个域而不是 *）。 这应该可以解决你的问题。
如何在 Express 上启用 CORS
如果你使用的是 Express，启用 CORS 的最简单方法是使用 cors 库。
你只需要使用 npm install cors 将其安装到你的 Express 项目中，然后 require 它并将其添加为中间件
var express = require('express');
// Import the library:
var cors = require('cors');
var app = express();
// Then use it before your routes are set up:
app.use(cors());
这里有两件重要的事情需要知道：
- Express 按顺序运行其中间件。 因此，请确保此
app.use代码在设置你的路由之前运行。 - 默认情况下，
cors库将允许来自任何来源的请求。 这可能会使你面临安全问题和滥用。
对于生产用途，最好不要允许所有来源。 相反，创建允许的域的白名单，并针对白名单检查每个请求。 这是方法：
// Set up a whitelist and check against it:
var whitelist = ['http://example1.com', 'http://example2.com']
var corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error('Not allowed by CORS'))
}
}
}
// Then pass them to cors:
app.use(cors(corsOptions));
第二选择：代理服务器
如果你无法修改服务器，则可以运行自己的代理。 并且如果此代理与你的页面不是同源，则可以返回 Access-Control-Allow-Origin 标头。
你将向你的代理发出请求，而不是将 API 请求发送到某些远程服务器，该代理会将它们转发到远程服务器。 这里有一些 proxy proxy options。
第三选择：JSONP（需要服务器支持）
如果 CORS 和代理服务器对你不起作用，则 JSONP 可能会有所帮助。 你本质上是使用 callback 参数发出 GET 请求
(get) http://api.example.com/endpoint?callback=foo
服务器会将 JSON 答复包装在对你的回调的函数调用中，你可以在其中处理它
foo({"your": "json", here: true})
存在一些缺点，尤其是 JSONP 仅支持 GET 请求，并且你仍然需要一个合作服务器。
仅限开发：禁用同源策略
如果这仅用于开发或学习目的，则最简单的方法是在浏览器中禁用同源策略。 请注意，如果这样做，你将使你的浏览器面临安全风险。 请按照以下说明操作：
这更像是一种最后的手段。 修改服务器以支持 CORS 或运行代理是最佳方法。
全副武装，准备就绪
你现在已准备好处理遇到的任何 Access-Control-Allow-Origin 错误！
Access-Control-Allow-Origin: Dealing with CORS Errors in React and Express 最初由 Dave Ceddia 于 2018 年 7 月 11 日在 Dave Ceddia 发布。