Question

我有express.js服务器：

createDB()

Cors软件包完全安装在package.json中。这是我的路线

import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import helmet from 'helmet';
import config from './config/config.js';
import authRoutes from './routes/auth.js';
import userRoutes from './routes/user.js';

mongoose.connect(config.mongoUri, { useNewUrlParser: true });
mongoose.connection.on('error', () => {
  throw new Error(`unable to connect to database: ${config.mongoUri}`);
});
const port = 9000;
const app = express();

app.use(helmet());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST,GET,LINK');
});
app.use('/', authRoutes);
app.use('/', userRoutes);
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

当我尝试向邮递员发出请求时-一切正常，但是，当尝试从另一台服务器进行登录时：

import express from 'express';

import authCtrl from '../controllers/auth.controller.js';

const router = express.Router();

router.route('/auth/signin').post(authCtrl.signin);
router.route('/auth/signout').get(authCtrl.signout);

export default router;

在控制台中发生错误

可以从原始位置获取“ http://localhost:9000/auth/signin/”上的内容 “ http://localhost:3000”已被CORS政策阻止：对预检请求的响应未通过访问控制检查：响应中的“ Access-Control-Allow-Origin”标头的值不得为通配符“ *” '，当请求的凭据模式为'include'时。

在网络中，我可以看到可选请求：访问控制允许标题：访问控制允许起源允许访问控制的方法：GET，HEAD，PUT，PATCH，POST，DELETE 访问控制允许来源：*

那我该如何解决这个问题？

Answer 1

使用cors npm时：

在您的应用js中，只需在下面添加并删除不必要的代码

import cors from 'cors';

app.use(cors());

以及package.json文件中的react project文件夹中：

"proxy": "http://localhost:9000",

因此您的api调用将是：

const signin = user => {
  console.log('user', user);
  return fetch('/auth/signin', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify(user),
  })
    .then(response => {
      return response.json();
    })
    .catch(err => console.log(err));
};

Answer 2

使用这样的cors配置。

app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:9000');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();

}）;

Answer 3

仅使用一个

app.use(cors());

或

app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:9000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
})

Answer 4

使用Postman，因此不涉及CORS机制。以第二种方式，并使用浏览器从url获取数据，请求本身成功，但是浏览器阻止了它。

我认为还有其他绕过CORS政策的方式

覆盖CORS策略的一种方法是安装扩展名，例如Allow-Control-Allow-Origin：*。它将Allow-Control-Allow-Origin：*标头添加到浏览器收到的所有响应中。如上所述，它会破坏Cookie的发送和接收方式，因此请记住这一点。

您可以做的另一件事是在请求中指定要绕过CORS安全机制。如果您使用Fetch API，则可以通过将mode参数设置为no-cors来实现：

import pandas

print(pandas.__version__)

无论Access-Control-Allow-Origin标头如何，此方法都将起作用。不幸的是，XMLHttpRequest中没有类似的东西。

如何解决CORS错误：请求未通过访问控制检查？

4 个答案: