axios HTTP请求返回错误（Access-Control-Allow-Origin）答案

【问题标题】：Axios HTTP requests returns into an error (Access-Control-Allow-Origin)axios HTTP请求返回错误（Access-Control-Allow-Origin）
【发布时间】：2018-04-16 06:36:22
【问题描述】：

我正在尝试在 JavaScript 中使用 Axios 发出 http 发布请求。该请求工作正常，但后来我尝试使用 cookie。作为我的后端，我在 http://localhost:8000 上使用 Express/Nodejs 服务器，而我的前端是在 http://localhost:3000 上的 react npm 测试服务器。

我的后端是这样的：

const express = require('express');
const cookieparser = require('cookie-parser');
const cors = require('cors');

const app = express();
app.use(cookieparser());
app.use(cors());

app.post("/request/status/check", (req, res) => {
    if(req.cookies.gitEmployee != null){
        res.status(200).send({res: 1, employeeName: req.cookies.gitEmployee.username, fullname: req.cookies.gitEmployee.fullname});
    } else if(req.cookies.gitCompany != null){
        res.status(200).send({res: 2, companyName: req.cookies.gitCompany.companyName, fullname: req.cookies.gitCompany.fullname});
    }else{
        res.status(200).send({res: 0});
    }
});

app.post("/request/testcookie", (req, res) => {
    res.cookie("gitEmployee", null);
    res.cookie("gitEmployee", {
        username: "testusername",
        fullname: "Test Username"
    }).send({res: 1});
});

所以，作为一个简短的描述：我通过向http://localhost:8000/request/testcookie 发布请求来设置测试cookie。响应应该是一个 JSON 对象，其中res = 1。另外，我试图通过向http://localhost:8000/request/status/check 发布请求来从cookie 中获取信息。在这种情况下，响应应该是对象{res:1 , employeeName: "testusername", fullname: "Test Username"}。

我用一个名为 Insomnia（类似于 Postman）的 REST 客户端尝试了这个概念，并且效果很好。

然后我为我的 React 应用程序和我正在使用 Axios 的 Http 请求编写了一个辅助类。

import axios from 'axios';

class manageMongo {
    authstate(){
        return new Promise((resolve, reject) => {
            axios("http://localhost:8000/request/status/check", {
                method: "post",
                data: null,
                headers: {
                    "Access-Control-Allow-Origin": "*"
                },
                withCredentials: true
            })
            .then(res => {
                    console.log(res.data);
                    if(res.data.res === 0){
                        resolve(false);
                    }
                    if(res.data.res === 1){
                        resolve(true);
                    }
                    if(res.data.res === 2){
                        resolve(true);
                    }
            });   
        });
    }
    setTestCookie(){
        axios("http://localhost:8000/request/testcookie", {
            method: "post",
            data: null, 
            headers: {"Access-Control-Allow-Origin": "*"},
            withCredentials: true
        })
        .then(res => { console.log(res)});
    }
}
export default manageMongo.prototype;

当我执行这些函数时，我得到了它们两个相同的错误（当然使用不同的 url）：

未能加载http://localhost:8000/request/testcookie：响应预检请求未通过访问控制检查：响应中的“Access-Control-Allow-Origin”标头不能是当请求的凭据模式为“包含”时，通配符“*”

我已经知道这是因为请求中的 withCredentials 设置。我添加这些设置是因为我想通过这些请求传递 cookie，如果我不添加 withCredentials，/request/status/check 请求总是返回 {res: 0}，即使我之前设置了 cookie。

我不知道，如果我设置 withCredentials = true，这是否会改变，但我在多个线程中读取。如果您知道即使没有 axios 也可以通过这些请求传递 cookie 的其他工作方法，请在此处分享！因为那是我想要达到的目标。

【问题讨论】：

标签： javascript node.js cookies axios

【解决方案1】：

问题似乎是你设置了 “访问控制允许来源”：* 尝试将其设置为您的实际来源，例如 '访问控制允许来源'：'http://localhost:8000' 要么 '访问控制允许来源'：'http://localhost:3000'

无论请求来自哪里。

【讨论】：