如何通过 JSON 向服务器发送 API 请求？不断收到 CORS 错误

Posted 2023-02-22

【中文标题】如何通过 JSON 向服务器发送 API 请求？不断收到 CORS 错误

【英文标题】：How to send API requests to a server via JSON? Keep getting CORS errors

【发布时间】：2018-10-15 16:43:20

【问题描述】：

我正在使用 ReactJs 和 Axios 向我的服务器发送 API 请求，但我不断收到相同的错误：

Failed to load http://***: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 400.

我正在尝试执行 POST 请求。我还尝试下载 Chrome 插件以允许 CORS。它确实适用于 GET 请求，但不适用于 POST 看起来。

如果我尝试向https://jsonplaceholder.typicode.com/users 发出请求，它工作正常。所以我猜是服务器出了点问题。

我的服务器使用 nginx 并且在 CentOS 7 操作系统上。

问：如何仅为我的本地开发 (localhost) 或特定网站启用 CORS？

编辑：我已经尝试在我的 Nginx 服务器上使用这个配置 - 没有运气：https://enable-cors.org/server_nginx.html

【参考方案1】：

虽然我不能用一些具体的代码来回答你，但下面是发生的事情（至少在我上次尝试 Angular 并遇到类似问题时发生的事情）：

在发送任何进一步的请求之前，将只有一个标头 OPTIONS HTTP 请求发送到服务器 URL。当应答这个调用时，服务器应该发送一个标题字段Access-Control-Allow-Origin，其中包含一个允许使用 API 进行进一步调用的域的白名单。要将开发环境中的所有请求列入白名单，将 Nginx 设置为使用Access-Control-Allow-Origin: * 回答就足够了。

【参考方案2】：

对于开发，我使用 Firefox 扩展CORS Everywhere。它会修改所有 Web 流量，以包含正确的 CORS 标头。 （它至少适用于 Opensuse 42.3 中有些过时的 Firefox。）

https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

请注意，这会破坏浏览器的安全机制。

对于部署，您必须配置服务器以发送正确的 CORS 标头。 （我从来没有这样做过，完成的网站计划在单个 IP 中工作。）

【参考方案3】：

如果您可以访问服务器并且服务器正在使用 Nodejs，那么这应该适合您：

将 CD 放入您的服务器文件夹：

cd server-folder

然后运行此命令以安装“cors”包：

npm install cors

要访问此包，请进入 IDE 中的服务器文件和下一个可用行：

const cors = require('cors');

接下来，添加这一行以使用中间件（假设您使用的是 Express）：

app.use(cors());