Question

我在前端使用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的状态，所以不能选择使用代理

Answer 1

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

Answer 2

很不幸，您将需要以某种方式代理请求。出于安全原因，CORS请求将被浏览器阻止。为了避免这种情况，后端需要为您注入allow origin标头。

解决方案取决于您需要在哪里进行代理，开发或生产。

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

在这种情况下，最简单的方法是使用'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服务器 检查以下页面，了解如何在您的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服务器。

Answer 3

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

如果我想将CORS添加到 https://test-example.com ，则可以按照以下步骤进行操作：

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

在带有axios的React中从前端启用CORS？

3 个答案: