我在前端使用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,所以使用代理是不是一个选择
4条答案
按热度按时间biswetbf1#
不幸的是,您需要以某种方式代理请求。出于安全原因,CORS请求将被浏览器阻止。为了避免这种情况,后端需要为您注入allow origin header。
解决方案取决于您需要代理、开发或生产的位置。
开发环境或node.js生产web服务器
在这个场景中,最简单的方法是使用 'http-proxy-middleware' npm包
生产-您拥有完全访问权限的Web服务器查看以下页面,了解如何在您的Web服务器上启用此类代理:
https://enable-cors.org/server.html
生产-静态主机/ Web服务器,无完全访问权限
然后从应用程序向脚本发送请求,脚本将转发请求并在响应中注入头
为了避免依赖第三方服务,您应该在将要使用的地方部署代理脚本。
我的建议是:
gdrx4gfi2#
您应该允许CORS从后端发出请求。
yeotifhr3#
可以使用CORS-anywhere。这是一个NodeJS反向代理,它将CORS头添加到代理请求中。
如果我想将CORS添加到https:test-example.com,那么我只需要按照以下步骤操作:
yrwegjxp4#
使用Chrome时,可以使用CORS扩展。例如MOESIF CORS plugin
你可以使用这样的插件来绕过CORS问题,至少在使用chrome的时候是这样。