gpt4 book ai didi

reactjs - 使用 axios 从 React 前端启用 CORS?

转载 作者:行者123 更新时间:2023-12-03 13:35:19 25 4
gpt4 key购买 nike

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

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

我不断收到相同的错误:缺少 CORS header “Access-Control-Allow-Origin”。这是我可以从前端克服的吗?我知道人们使用该 API,所以它不可能是后端错误,对吗?我尝试请求很多 API,但没有一个能够使用我的代码。我尝试使用 https://cors-anywhere.herokuapp.com它运行了大约一周,效果很好,我想今天就失效了。我希望我的网站保持 24/7 全天候运行,因此不能选择使用代理

最佳答案

不幸的是,您需要以某种方式代理请求。出于安全原因,CORS 请求将被浏览器阻止。为了避免这种情况,后端需要为您注入(inject)允许原始 header 。

解决方案取决于您需要在何处进行代理、开发或生产。

开发环境或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

然后从您的应用程序向脚本发出请求,脚本将转发该请求并在响应中注入(inject) header

如果您的主机不支持 PHP不幸的是,您将需要依赖一种类似于您所使用的解决方案。

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

我的建议是:

  • 转移到支持 php 的主机:)(Netlify 可能是一个解决方案,但我不确定)

  • 您可以将自己的基于 Node.js 的代理脚本部署到 Firebase(例如 Firebase 函数),以确保它不会神奇地崩溃,并且免费计划可能会处理您的请求量。

  • 创建一个免费的 Amazon AWS 帐户,您将在其中免费获得一年的最小实例,并在那里运行带有 nginx 代理的 ubuntu 服务器。

关于reactjs - 使用 axios 从 React 前端启用 CORS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55200786/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com