我正在使用 Reactjs 并在 javascript 中通过 AJAX 使用 API。我们如何解决这个问题？之前我使用 CORS 工具，但现在我需要启用 CORS。
【问题讨论】：
标签： javascript ajax reactjs cors
您只需将 cors 添加到后端 server.js 文件即可进行跨域 API 调用。
const cors = require('cors');
app.use(cors())
【讨论】：
使用这个。
app.use((req,res, next)=>{
res.setHeader('Access-Control-Allow-Origin',"http://localhost:3000");
res.setHeader('Access-Control-Allow-Headers',"*");
res.header('Access-Control-Allow-Credentials', true);
next();
});
【讨论】：
在 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-config NGINX for proxy_pass 解释 here。
4-绕过带有 chrom 扩展的 Cross-Origin-Policy（仅用于开发，不推荐！）
5-通过下面的 URL 绕过跨域策略（仅用于开发）
"https://cors-anywhere.herokuapp.com/{type_your_url_here}"
6-在您的package.json 文件中使用proxy：（仅用于开发）
如果这是您的 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);
});
});
【讨论】：
在 node.js 的服务器端，我刚刚添加了它并且它有效。我本地机器上的 reactjs 前端可以访问托管在 azure 上的 api 后端：
// Enables CORS
const cors = require('cors');
app.use(cors({ origin: true }));
【讨论】：
我处理这个问题几个小时。假设请求是 Reactjs (javascript)，后端 (API) 是 Asp .Net Core。
在请求中，必须在header中设置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.在 Startup --> ConfigureServices:
#region Allow-Orgin
services.AddCors(c =>
{
c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
});
#endregion
2。在 Startup --> Configure before app.UseMvc() :
app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
3.行动前在控制器中：
[EnableCors("AllowOrigin")]
【讨论】：
假设您想从http://localhost:3000 中点击https://yourwebsitedomain/app/getNames，那么只需进行以下更改：
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。您应该能够在浏览器的控制台中看到记录的数据
【讨论】：
package.json proxy 设置在生产版本中被完全忽略
How to overcome the CORS issue in ReactJS 可能重复的问题
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();
});
【讨论】：