Javascript 如何在react.js中允许COR？

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

可能会重复来自的问题

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

---

您可以通过一个名为CORS的chrome插件暂时解决这个问题。

最好在服务器端添加启用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();
});

假设您想从那时开始点击，只需进行以下更改：

packagae.json：

   "name": "version-compare-app",
   "proxy": "https://yourwebsitedomain/",
   ....
   "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
     ...

在您的组件中，按如下方式使用它：

import axios from "axios";

componentDidMount() {
const getNameUrl =
  "app/getNames";

axios.get(getChallenge).then(data => {
  console.log(data);
});

}

---

停止本地服务器并重新运行npm start。您应该能够在浏览器控制台中看到记录的数据

我处理这个问题已经有几个小时了。让我们考虑的请求是Reactjs（JavaScript）和后端（API）是ASP.NET.Cype。 在请求中，必须在标题内容类型中设置：

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核心API）中，您必须有一些设置：

1。在启动-->配置服务中：

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

2。启动时-->在app.UseMvc（）之前配置：

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

3。操作前在控制器中：

[EnableCors("AllowOrigin")]

---

在node.js中的服务器端，我刚刚添加了这个，它成功了。本地计算机上的reactjs前端可以访问azure上托管的api后端：

// Enables CORS
const cors = require('cors');
app.use(cors({ origin: true }));

---

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

第一、第二和第三是最好的：

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-config NGINX，用于代理\u pass，解释如下

4-通过chrom扩展绕过跨原产地政策（仅用于开发，不推荐！）

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

6-在

package.json

文件中使用

proxy

（仅用于开发）

如果这是您的API:

http://45.456.200.5:7000/api/profile/

将此部分添加到您的

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

用这个

app.use（（请求、恢复、下一步）=>{
res.setHeader（'Access-Control-Allow-Origin'，”http://localhost:3000");
res.setHeader（'Access-Control-Allow-Headers'，“*”）；
res.header（'Access-Control-Allow-Credentials'，true）；
next（）；
});

您只需将COR添加到后端server.js文件中，即可进行跨源API调用

const cors = require('cors');
app.use(cors())

---

这不是一个问题。这是由浏览器实现的安全措施。您是API的所有者还是第三方API？您需要启用服务器端。参见此处的IIS7示例：我是第三方，我只使用在AWS服务器上实现的API。我需要知道在文件中添加CORS代码的位置。必须在运行API的服务器上启用CORS。您不能在客户端代码中启用此功能。如果API支持CORS，浏览器将执行请求。这并不能解决react.js中的问题，这只是一个解决方案。在浏览器上禁用CORS并不能真正解决应用程序的问题，因为它只适用于您的机器。这是否意味着如果我的前端部署在其他地方，我不需要更改前端上的任何内容。这些头应该添加到后端REST API头中？在我运行同一台机器上运行的Next.js front-end server+Express API back-end server的情况下，而不是使用“*”I did“port]”来修复此问题。不需要第二个res.header行。对我来说，我添加了这段代码，但它仍然会抛出错误：（但只有在某些电话上，这是周五晚上，你保存了我的周末；）我一直在阅读

包。json

代理设置在生产版本中完全被忽略
const cors = require('cors');
app.use(cors())