在 React 中使用 axios 从前端启用 CORS？答案

【问题标题】：Enable CORS from front-end in React with axios?在 React 中使用 axios 从前端启用 CORS？
【发布时间】：2019-08-07 14:33:36
【问题描述】：

我在前端使用 React，并从我不拥有的另一个域调用 API。我的 axios 请求：

axios(requestURL, {
        method: 'GET',
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
            'Authorization': key,
            withCredentials: true,
            mode: 'no-cors',
          }

我不断收到相同的错误：CORS 标头“Access-Control-Allow-Origin”丢失。这是我可以从前端克服的东西吗？我知道人们使用该 API，所以它不可能是后端错误，对吧？我尝试请求很多 API，但甚至没有一个与我的代码一起使用。我尝试使用https://cors-anywhere.herokuapp.com 并且它工作了一周，我认为它今天失败了。我希望我的网站保持 24/7 全天候运行，因此不能选择使用代理

【问题讨论】：

您要使用什么 API？通常你会得到一个密钥/令牌。

标签： reactjs cors axios

【解决方案1】：

不幸的是，您需要以某种方式代理请求。出于安全原因，浏览器将阻止 CORS 请求。为避免这种情况，后端需要为您注入允许源头。

解决方案取决于您需要代理、开发或生产的位置。

开发环境或node.js生产网络服务器

在这种情况下最简单的方法是使用 'http-proxy-middleware' npm 包

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

module.exports = function (app) {
    app.use(proxy('/api', {
        target: 'http://www.api.com',
        logLevel: 'debug',
        changeOrigin: true
    }));
};

生产 - 您拥有完全访问权限的 Web 服务器 查看以下页面以了解如何在您的网络服务器上启用此类代理：

https://enable-cors.org/server.html

生产 - 静态托管/没有完全访问权限的 Web 服务器

如果您的主机支持 PHP，您可以添加一个 php 脚本，例如：https://github.com/softius/php-cross-domain-proxy

然后从您的应用向脚本发出请求，脚本将转发它并在响应中注入标头

如果您的主机不支持 PHP 不幸的是，您将需要依赖于您使用过的解决方案。

为了避免依赖第三方服务，您应该在您将使用的地方部署一个代理脚本。

我的建议是：

移至支持 php 的主机 :)（Netlify 可能是一个解决方案，但我不确定）
例如，您可以将自己的基于 node.js 的代理脚本部署到 Firebase（firebase 函数），以确保它不会神奇地停机，并且免费计划可能会处理您的请求量。 /p>
创建一个免费的 Amazon AWS 账户，您将在其中免费获得一年的最小实例，并在那里运行一个带有 nginx 代理的 ubuntu 服务器。

【讨论】：

您好，什么是“应用程序”？

【解决方案2】：

您应该允许来自后端的 CORS 发出请求。

【讨论】：

所以如果我不是后端的所有者并且我没有与他有任何联系，那么我无能为力吗？
@IdleSolution 您可以设置自己的启用了 CORS 的服务器，作为真正后端的代理。
是的，你是对的。前端不允许cors是不可能的

【解决方案3】：

可以使用CORS-anywhere。它是一个 NodeJS 反向代理，将 CORS 标头添加到代理请求中。

如果我想将 CORS 添加到 https://test-example.com，那么我只需按如下方式进行：

https://cors-anywhere-herokuapp.com/https://test-example.com

【讨论】：