如何解决CORS错误:请求未通过访问控制检查? [英] How to fix CORS error: request doesn't pass access control check?

问题描述

我有express.js服务器:

I have express.js server:

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中.这是我的路线

Cors package install corectly in package.json. Here is my routes

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;

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

When i trying to make request from Postman - all is working, but when try to do in from another server :

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

在控制台中发生错误

可以在" http://localhost:9000/auth/signin/"处获取信息从起源" http://localhost:3000 "已被CORS策略阻止:对预检请求的响应未通过访问控制检查:当请求的凭据模式为包括"时，响应中"Access-Control-Allow-Origin"标头的值不能为通配符"*".

Access to fetch at 'http://localhost:9000/auth/signin/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

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

In network i can see OPTIONAL request : Access-Control-Allow-Headers: access-control-allow-origin Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE Access-Control-Allow-Origin: *

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

So how can I fix this problem?

推荐答案

使用cors npm时:

as you are using cors npm :

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

in your app js just add below and remove unnecessary code

import cors from 'cors';

app.use(cors());

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

and in your react project folder in package.json file :

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

因此您的api调用将是:

so your api call will be :

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

这篇关于如何解决CORS错误:请求未通过访问控制检查?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！