尝试使用Axios向API发送POST请求时，响应中的“访问控制允许凭据”标头为“”

Question

我有一个react应用程序在localhost:3000上运行，localhost:8000上有一个nodeJS express服务器，我需要向jsreport API发送POST请求，但当我尝试发送请求时，出现以下错误：

访问位于“”的XMLHttpRequesthttp://localhost:5488/api/report“起源”http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：响应中的'access control Allow Credentials'标头的值为'，当请求的凭据模式为'include'时，该值必须为'true'。XMLHttpRequest启动的请求的凭据模式由withCredentials属性控制。

后请求：

axios.defaults.withCredentials = true;

axios.post('http://localhost:5488/api/report',
{withCredentials: true, crossorigin: true},
{
  "template": {
    "content": "<h1>Hello {{foo}}</h1>",
    "engine": "handlebars",
    "recipe": "chrome-pdf"
  },
  "data": {
    "foo": "world"
  }
}).then((response)=> {
  fs.writeFileSync('/reports/report.pdf', response.content)
}).catch(function (error) {
  console.log('AXIOS error: '+ error);
  return 'errorReport'
})

Server.js：

var corsOptions = {
  origin: 'http://localhost:3000',
  credentials : true
 }
app.use(cors(corsOptions));
app.use((req, res, next) => {
  res.header('Access-Control-Expose-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  const err = new Error('Not Found');
  err.status = 404;
  next(err);
})

我不明白如果我在axios中使用.withCredentials并在服务器中建立了标头和cors配置，为什么凭据是空的。

Answer 1

我已经摆弄了一段时间的持久用户会话，在将passport/passport-local（用于身份验证）、mongoose、express-session和connect-mongo（用于在mongo中存储会话）串在一起时遇到了问题。

@mshibl comment帮助我更进一步，为express设置这些cors选项，最终使cookies被正确传递。希望这能帮助其他有类似问题的人

app.use(cors({
  credentials: true,
  origin: "http://localhost:3000"
}));

Answer 2

更新Server.js如下

var corsOptions = {
  origin: 'http://localhost:3000',
  credentials : true
 }

app.use(cors(corsOptions));

app.use(function (req, res, next) {	
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');    
    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 3

我使用了下一个代码而不是axios请求，它起作用了：

fetch('http://localhost:5488/api/report', {
  method: 'POST',
  body: JSON.stringify(data),
  headers:{
    'Content-Type': 'application/json'
  },
  credentials: "same-origin",
}

将凭据设置为“同一来源”修复了这个问题，但由于我想使用jsreport，我找到了一个包，使这一过程更容易，而无需使用fetch或axios。

import jsreport from 'jsreport-browser-client-dist'
jsreport.serverUrl = 'http://localhost:5488'
jsreport.render(document.getElementById('reportPlaceholder'), data)

使用jsReport方法，我可以在反应组件中显示我的报告

<div id="reportPlaceholder">
      <p>there should be a report here...</p>
</div>