时间戳

首页 > 解决方案 > 如何修复 CORS 错误：请求未通过访问控制检查？

node.js - 如何修复 CORS 错误：请求未通过访问控制检查？

问题描述

我有 express.js 服务器：

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}!`));

Cors 包正确安装在 package.json 中。这是我的路线

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;

当我尝试从 Postman 发出请求时 - 一切正常，但是当尝试从另一台服务器发出请求时：

const signin = user => {
  console.log('user', user);
  return fetch('http://localhost:9000/auth/signin/', {
    method: 'POST',
    headers: {
      'Access-Control-Allow-Origin': '*',
      Accept: 'application/json',
    },
    credentials: 'include',
    body: JSON.stringify(user),
  })
    .then(response => {
      return response.json();
    })
    .catch(err => console.log(err));
};

它的错误发生在控制台中

CORS 策略已阻止从源“ http: //localhost:9000/auth/signin/ ”获取从“ http://localhost:3000 ”获取的访问权限：对预检请求的响应未通过访问控制检查：值当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头不能是通配符“*”。

在网络中我可以看到可选请求： Access-Control-Allow-Headers: access-control-allow-origin Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Allow-Origin: *

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

标签： node.jsreactjsexpresscors

解决方案

当您使用 cors npm 时：

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

import cors from 'cors';

app.use(cors());

并在文件中的反应项目文件夹中package.json：

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

推荐阅读