我正在使用 Reactjs 并通过 JavaScript 中的 AJAX 使用 API。我们如何解决这个问题？之前我使用过 CORS 工具，但现在我需要启用 CORS。
如何在 react.js 中允许 CORS？
IT技术
javascript
ajax
reactjs
cors
2021-03-23 12:12:15
6个回答
在 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);
});
});
最好在服务器端添加 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();
});
如何克服 ReactJS 中的 CORS 问题中可能重复的问题
CORS 通过添加新的 HTTP 标头来工作，这些标头允许服务器描述允许使用 Web 浏览器读取该信息的源集。这必须在服务器中配置以允许跨域。
您可以通过名为 CORS 的 chrome 插件临时解决此问题。
我处理这个问题几个小时。让我们考虑请求是 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. 在启动 --> ConfigureServices 中：
#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 }));