如何在react.js中允许CORS？

Question

我在javascript中使用Reactjs和通过AJAX使用API。我们如何解决这个问题？以前我使用CORS工具，但现在我需要启用CORS。

Answer 1

如何克服 ReactJS 中的 CORS 问题中可能重复的问题

CORS的工作原理是添加新的HTTP头，允许服务器描述允许使用web浏览器读取该信息的源集。这必须在服务器中配置以允许跨域。

您可以通过名为CORS的chrome插件临时解决此问题。

Answer 2

最好在服务器端添加启用CORS的代码。要在基于NodeJS和ExpressJs的应用程序中启用CORS，应包含以下代码-

var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 3

在React中有6种方法可以做到这一点，

1、2和3号是最好的：

服务器端的1-config CORS

手动使用 2 组标头，如下所示：

resonse_object.header("Access-Control-Allow-Origin", "*");
resonse_object.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

3-配置NGINX用于proxy_pass，这里解释。

4-绕过带有chrom扩展的跨域策略（仅用于开发，不推荐！

5-使用URL bellow绕过跨来源政策（仅用于开发）

"https://cors-anywhere.herokuapp.com/{type_your_url_here}"

package.json 文件中的 6-use 代理：（仅用于开发）

如果这是你的API：超文本传输协议：//45.456.200.5:7000/api/profile/

将此部件添加到包中。json文件：“代理”：http://45.456.200.5:7000/“，

然后使用api的下一部分提出您的请求:

React.useEffect(() => {
    axios
        .get('api/profile/')
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
});