Vue项目中使用axios作为http请求库,我想在get请求中添加一个自定义的请求头,结果在我请求数据的时候,就报出了跨域的问题.

给http请求添加自定义的请求头参数很常用,如我给我的请求添加token给服务端验证请求的合法性等,我在我的项目中给所有的get请求添加了一个aaa参数,结果我在使用get请求数据的时候,报出了跨域问题的异常信息.报的信息如下:

Access to XMLHttpRequest at 'http://localhost:3004/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field aaa is not allowed by Access-Control-Allow-Headers in preflight response.

简单说一下我的场景,我的一个vue文件中,发送了一个get请求,请求服务器上的用户信息列表,代码如下:

<table>
    <tr v-for="(item,id) in userList" :key="id">
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
    </tr>
</table>

created() {
    // 获取用户列表,在下面的methods中定义的方法
    this.getUserName();
},

// methods中定义的获取用户信息列表的方法
methods: {
    // 获取用户信息
    getUserName() {
        this.axios.get("http://localhost:3004/users").then(res => {
            this.userList = res.data.user;
        });
    }
}

这里Vue中的数据渲染没有什么问题,然后我想在我发起get请求的时候,向服务器发送一个自定义的请求头.我就通过axios添加了一个公共的请求参数:

axios.defaults.headers.get['aaa'] = "ccc";

我的代码量不大,就直接把axios的一些配置直接写在了main.js中了.

服务端跨域问题的处理

服务端我是koa写的,通过cors处理的跨域问题.

// 引入koa
const Koa = require("koa");

//引入koa2-cors
const cors = require("koa2-cors");

// 通过use函数加载koa2-cors并加入cors的一些配置
app.use(cors({
    origin: (ctx) => {
        return "*";
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'post', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
    AccessControlAllowHeaders: "*"
}));

// 设置router并处理客户端发送过来的get请求
router.get("/users", async (ctx) => {
    let getUserListSql = "select * from user";
    let getSchoolListSql = "select * from school";
    let userList = await query(getUserListSql);
    let schoolList = await query(getSchoolListSql);
    ctx.body = {
        user: userList,
        school: schoolList
    };
});

我通过pm2管理的node服务,我把服务跑在了3004端口,这里都是没有任何问题的(这里我们暂且不讨论上面的代码的合理性,这里只是做demo的,不是在真是的项目中,代码的组织是不严谨的).但是我在客户端发起请求的时候,就报错了:报错信息就是这样的:

Access to XMLHttpRequest at 'http://localhost:3004/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field aaa is not allowed by Access-Control-Allow-Headers in preflight response.

这里的报错是跨域问题,但我在没有添加自定义请求头的时候是没有任何问题的,所以这里的问题应该就是和自定义的请求头有关系.后来经过查找资料,原来浏览器在发送带有自定义的请求头时,浏览器会先向服务器发送OPTIONS预检请求,探测该请求服务端是否允许自定义跨域字段.如果允许,则继续执行请求,如果不允许,则返回错误信息提示错误.

看到这些信息,然后回头看cors的配置信息,其中有allowHeaders配置项,表示服务器支持的请求头信息字段,于是我就在默认的配置后面加上了我在客户端自定义添加的aaa字段,cors的配置就变成如下:

app.use(cors({
    origin: (ctx) => {
        return "*";
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'post', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept','aaa'],
    AccessControlAllowHeaders: "*"
}));

只在allowHeaders配置项中添加了一个aaa字段,别的地方没有任何改动,然后问题解决了.

服务端获取请求头信息

ctx.headers["aaa"];