在 React 中使用 axios 从前端启用 CORS? [英] Enable CORS from front-end in React with axios?

问题描述

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

I am using React on the front-end and I'm calling API from another domain which I don't own. My axios request:

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，因此不能选择使用代理

I keep on getting the same error: CORS header ‘Access-Control-Allow-Origin’ missing. Is this something I can overcome from the frontend? I know for a fact that people use that API so it can't be backend fault, right? I tried requesting a lot of APIs and not even one worked with my code. I tried using https://cors-anywhere.herokuapp.com and it worked fine for like a week, I think its down today. I want my site to stay 24/7 so using a proxy is not an option

推荐答案

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

You will, unfortunately, need to proxy the request somehow. CORS requests will be blocked by the browser for security reasons. To avoid this, backend needs to inject allow origin header for you.

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

Solutions depend on where you need to proxy, dev or production.

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

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

The easiest way to do it in this scenario is to use the 'http-proxy-middleware' npm package

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

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

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

Production - Web server where you have full access Check the following page to see how to enable such proxying on your webserver:

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

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

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

If your hosting supports PHP, you can add a php script like: https://github.com/softius/php-cross-domain-proxy

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

Then hit a request from your app to the script, which will forward it and inject headers on the response

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

If your hosting doesn't support PHP Unfortunately, you will need to rely on a solution like the one that you have used.

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

In order to avoid relying on a third party service, you should deploy a proxy script somewhere that you will use.

我的建议是:

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

• Move to a hosting that supports php :) (Netlify could be a solution, but I'm not sure)

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

You can deploy a node.js based proxy script of your own to Firebase for example (firebase functions), to ensure it will not magically go down, and the free plan could possibly handle your amount of requests.

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

Create a free Amazon AWS account, where you will get the smallest instance for free for a year, and run an ubuntu server with nginx proxy there.

这篇关于在 React 中使用 axios 从前端启用 CORS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！