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

问题描述

我在前端使用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全天候运行，因此不能选择使用代理

解决方案

不幸的是，您将需要以某种方式代理请求.出于安全原因，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://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

解决方案

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.

Development environment or node.js production webserver

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
    }));
};

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

Production - Static hosting / Web server without full access

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

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.

My suggestions are:

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

• 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.

• 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.

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