首页 > 解决方案 > 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 access-control-allow-credentials

问题描述

我遇到过几次 CORS 问题,但无法解决。

我正在尝试通过 google 在我的项目上进行身份验证,通过会话使用 passport.js,但我遇到了如下所示的 CORS 问题

从源“http://localhost:3000”访问“http://localhost:4444/auth/google”处的 XMLHttpRequest 已被 CORS 策略阻止:Access 不允许请求标头字段 access-control-allow-credentials预检响应中的 -Control-Allow-Headers。

客户端.js

const handleGoogleAuth = (e) => {
    e.preventDefault();
    try {
      axios({
        url: `http://localhost:4444/auth/google`,
        method: 'GET',
        mode: 'cors',
        credentials: true,
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          'Access-Control-Allow-Credentials': true,
        }
      }).then((response) => {
        console.log(response.data);
     });
    } catch (err) {
      console.error(err);
    }
  };

服务器.js

const path = require('path')
const express = require('express')
const cors = require('cors')
const passport = require('passport')
const session = require('express-session');

const app = express();

// middleware
app.use(express.json());
app.use(express.urlencoded({extended: true}))

//app.use(cors());
// app.use(cors({
//   origin: '*',
//   methods: ['GET','POST','DELETE','UPDATE','PUT','PATCH']
// }));

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

标签: reactjsexpresscorspassport-google-oauth

解决方案


推荐阅读