如何在react.js中允许CORS？

Question

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

Answer 1

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

数字 1、2 和 3是最好的：

1-在服务器端配置 CORS

像这样手动设置 2 组标题：

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

3-config NGINX for proxy_pass 这在这里解释。

4-通过 chrom 扩展绕过跨源策略（仅用于开发，不推荐！）

5-绕过带有以下URL的跨域策略（仅用于开发）

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

6-proxy在您的package.json文件中使用：（仅用于开发）

如果这是您的 API： http://45.456.200.5:7000/api/profile/

将此部分添加到您的package.json文件中： "proxy": "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);
        });
});

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

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

CORS 通过添加新的 HTTP 标头来工作，这些标头允许服务器描述允许使用 Web 浏览器读取该信息的源集。这必须在服务器中配置以允许跨域。

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

Answer 4

我处理这个问题几个小时。让我们考虑请求是 Reactjs (javascript)，后端 (API) 是 Asp .Net Core。

在请求中，您必须在标头 Content-Type 中设置：

Axios({
            method: 'post',
            headers: { 'Content-Type': 'application/json'},
            url: 'https://localhost:44346/Order/Order/GiveOrder',
            data: order,
          }).then(function (response) {
            console.log(response);
          });

在后端（Asp .net core API）你必须有一些设置：

1. 在“启动”-->“配置服务”中：

#region Allow-Orgin
            services.AddCors(c =>
            {
                c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });
            #endregion

2. 在 Startup --> app.UseMvc() 之前配置：

app.UseCors(builder => builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());

3. 在控制器中执行操作之前：

[EnableCors("AllowOrigin")]