当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头不得为通配符“*”答案

【问题标题】：'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'当请求的凭据模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头不得为通配符“*”
【发布时间】：2018-12-16 07:41:13
【问题描述】：

我正在尝试将我的电子应用程序转换为完整的网络。当我从本地主机运行应用程序时，出现此错误：

无法加载https://agrt.herokuapp.com/login：响应预检请求未通过访问控制检查：响应中的“Access-Control-Allow-Origin”标头不能是当请求的凭据模式为“包含”时，通配符“*”。起源 'http://localhost:4200' 因此不允许访问。这 XMLHttpRequest 发起的请求的凭证模式是由 withCredentials 属性控制。

在我的客户端上，我发送了一个 http 请求：

this.http.post(Consts.REMOTE_URL + '/login', {
      username: username,
      password: password
    }, {withCredentials:true}).

在我的服务器上，我使用我设置的 cors ant：

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

我的服务器在 heroku 上。

当我逃离电子时，一切顺利。

拜托，任何帮助都会很棒！

server.js：

const express = require('express')
const passport = require('passport')
const winston = require('winston')
const db = require('./db')
const cors = require('cors')
require('dotenv').config()

const port = process.env.PORT || 9000
const app = express()

app.use(cors())
require('./config/passport')(passport, db)
require('./config/express')(app, passport, db.pool, db)
require('./app/routes')(app, passport)

app.use(function (err, req, res, next) {
  if (err.message && (~err.message.indexOf('not found'))) {
    return next()
  }
  winston.error(err.stack)
  return res.status(500).json({error: 'Error on backend occurred.'})
})

const server = app.listen(port, () => {
  console.log("listening to port: "+port);
  if(app.get('env') === 'test') return

  winston.log('Express app started on port ' + port)
})

server.on('close', () => {
  winston.log('Closed express server')

  db.pool.end(() => {
    winston.log('Shut down connection pool')
  })
})

express.js：

const path = require('path')
const express = require('express')
const expressHandlebars = require('express-handlebars')
const expressValidator = require('express-validator')
const session = require('express-session')
const pgSession = require('connect-pg-simple')(session)
const bodyParser = require('body-parser')
const cookieParser = require('cookie-parser')
const methodOverride = require('method-override')
const morgan = require('morgan')
const winston = require('winston')
const config = require('./')
const resumable = require('../app/lib/resumablejs')
const env = process.env.NODE_ENV || 'development'

module.exports = (app, passport, pool, db) => {
    let log = 'dev'
    if (env !== 'development') {
    log = {
      stream: {
        write: message => winston.info(message)
      }
    }
  }

    if (env !== 'test') app.use(morgan(log))

    app.engine('handlebars', expressHandlebars())
    app.set('view engine', 'handlebars')

    app.use(bodyParser.json())
    app.use(bodyParser.urlencoded({ extended: true }))
    app.use(expressValidator())

    app.use(methodOverride(function (req) {
        if (req.body && typeof req.body === 'object' && '_method' in req.body) {
            var method = req.body._method
            delete req.body._method
            return method
        }
    }))

    app.use(cookieParser())
    app.use(session({
        store: new pgSession({
            pool
        }),
        secret: config.session_secret,
        // saveUninitialized: false,
        // resave: false,
         cookie: { maxAge: 14 * 24 * 60 * 60 * 1000 }
    }))

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

    app.use(passport.initialize())
    app.use(passport.session())

    app.use('/', express.static(path.join(config.root, 'public')))
    app.use('/files', resumable(undefined, undefined, db))
}

【问题讨论】：

如果您签入浏览器开发者工具，当您进行该调用时，您的服务器会返回哪些标头？（来自实际调用和 OPTIONS 预检）
Access-Control-Allow-Headers: access-control-allow-origin,content-type Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE Access-Control- Allow-Origin: * Connection: keep-alive Content-Length: 0 Date: Sun, 08 Jul 2018 12:44:57 GMT Server: Cowboy Vary: Access-Control-Request-Headers Via: 1.1 vegur X-Powered-By:快递
感谢您的快速回复！
因此根据错误，您的access-control-allow-origin 标头设置为*，而不是http://localhost:4200
如何更改？

标签： angular http express heroku electron

【解决方案1】：

尝试使用以下配置：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header(
    "Access-Control-Allow-Headers",
    "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept"
  );
  if ("OPTIONS" == req.method) {
    res.send(200);
  } else {
    next();
  }
});

【讨论】：

【解决方案2】：

或者如果你使用 CORS 中间件并且你想发送 withCredentials boolean true （例如发送带有 set-cookie 头的响应），你可以像这样配置 CORS：

const corsOptions = {
  origin: ["http://localhost:3000"],
 //update: or "origin: true," if you don't wanna add a specific one
  credentials: true,
};
app.use(cors(corsOptions));

因为使用凭证 app.use(corse()) 不起作用，您应该在 corsOptions 中指定您的具体来源。

它（不知何故）等于像这样设置响应标头：

app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

【讨论】：