CORS表示无法正常工作

Question

我试图允许从任何地方访问。

我尝试使用应用中间件：

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', '*');
  res.setHeader("Access-Control-Allow-Headers", "*");
  next();
});

我已尝试在路线中使用它：

app.post('/login',function(req,res){
var login   = req.body;
var sess    = req.session;

if (!login.email && !login.pwd){    
    return res.status(401);
}
res.header("Access-Control-Allow-Origin", '*');
res.header("Access-Control-Allow-Headers", '*');
.... more code here

两者都不起作用。我不断收到错误消息：“对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。”

在服务器的更下方，我们对另一条路由使用了类似的代码，该代码有效：

app.post('/questar',function(req,res){
//allow xhr post from retireup domains
var cors = {
    origin= "https://www.website.com";
};
res.header("Access-Control-Allow-Origin", cors.origin);
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.type('application/json');

我无法区分代码之间的区别，但是只有一套有效。有什么想法吗？这似乎是一个不应该太复杂的问题。谢谢

Answer 1

应用“cors”中间件后。您应该在“localhost:”之前传递“http://”。在由 Axios 发送的 url 中，如下所示：

axios.get("http://localhost:8080/api/getData")
.then(function (response) {
this.items= response.data;
}).catch(function (error) {
console.log(error)
});

Answer 2

MDN对服务器应该如何响应Preflight Request有一个非常简短的解释。

在处理同一路由上的其他请求方法之前，您可以通过处理 HTTP OPTIONS 方法（就像处理 GET 和 POST 方法一样）来处理 CORS 预检请求：

app.options('/login', ...);
app.get('/login'. ...);
app.post('/login'. ...);

在您的情况下，它可能就像更改您的app.use()调用一样简单app.options()，将路由作为第一个参数传递，设置适当的标头，然后结束响应：

app.options('/login', function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', '*');
  res.setHeader("Access-Control-Allow-Headers", "*");
  res.end();
});
app.post('/login', function (req, res) {
  ...
});

Answer 3

首先安装 npm 中的“cors”包：npm i -S cors

然后在您的 Express 服务器中启用它。

var express = require('express'),
  cors = require('cors');

const app = express();
app.use(cors());

...

Answer 4

在路由之前（而不是在路由内部）配置CORS内容。

在这里，像这样（来自enable-cors.org）：

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();
});

app.get('/', function(req, res, next) {
  // Handle the get for this route
});

app.post('/', function(req, res, next) {
 // Handle the post for this route
});

我总是在Express + Angular应用中像这样配置它，并且效果很好。

希望能帮助到你。