反应客户端尝试获取数据时如何解决express.js中的CORS请求未成功？答案

【问题标题】：How to solve CORS request did not succeed in express.js when react client try fetch data?反应客户端尝试获取数据时如何解决express.js中的CORS请求未成功？
【发布时间】：2019-02-20 23:51:00
【问题描述】：

我在app.js 文件中做了很多更改来解决这个问题CORS request did not succeed 但我总是面临同样的问题。如何解决这个问题。我添加了我的 app.js 代码，请检查任何人。谢谢

app.js 代码

var express = require('express');

var bodyParser = require("body-parser");
var app = express();
var cors = require('cors');

const userlogin   = require('./routes/User_route');
const deviceRoutes = require("./routes/Device_route");

app.use('*', cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.set('port', process.env.PORT || 4007);
app.set('host', "*.*.*.*"); 

app.use("/users",userlogin);
app.use("/users", deviceRoutes);
module.exports = app;

错误

TypeError：“尝试获取资源时出现网络错误。” bundle.js:132447:16

跨域请求被阻止：同源策略不允许读取 http://localhost:4007/users/login 的远程资源。（原因： CORS 请求未成功）。

【问题讨论】：

对不起，我当时误解了。谢谢你通知我。 @鬼猫
不客气。我很欣赏这次快速而善良的回归，我认为你将来会更加小心，你会创造出更多更好的选票；-)

标签： node.js express cors

【解决方案1】：

您可以尝试添加一个中间件来处理 CORS。

//CORS middleware
var corsMiddleware = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'localhost'); //replace localhost with actual host
    res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, PATCH, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization');

    next();
}

app.use(corsMiddleware);

【讨论】：

登录后客户端收不到数据。同样的错误
您能否详细说明此设置如何？服务器在哪里运行？客户端在哪里运行？你是用邮递员还是浏览器来做api调用？
我同时使用浏览器和邮递员，在邮递员中不会发生此错误，但对于浏览器总是如此。服务器和客户端都运行在不同的PC上。
如果您在不同的 PC 上运行客户端和服务器，请确保在此行中 res.header('Access-Control-Allow-Origin', 'localhost') localhost 替换为客户端 PC 的 IP。
如果我指定客户端的IP，那么它将限制客户端的数量。我无法指定任何客户端 IP，因为客户端 IP 每次都会更改。

【解决方案2】：

你可以在 express 中使用 cors npm。

npm install cors

更新 app.js

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

【讨论】：