koa2给某条特定的url设置cors后，前端ajax自定义头部后就无法跨域，去掉头部就能跨域

Question

app.js

const Koa = require('koa');
const Router = require('koa-router');
const router = new Router();
const app = new Koa();



router.all('*',function (ctx, next) {
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , myheader');
    ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

    next();
  });


router.post('/api/test/', (ctx, next) => {
    ctx.body = {
        status: 'success'
    }
});

router.post('/api/test2/', (ctx, next) => {
    ctx.body = {
        status: 'success'
    }
});



app.use(router.routes()).use(router.allowedMethods());



app.listen(8089);


console.log('server start at 8089')

前端自定义头部myheader

axios.post(`http://localhost:8089/api/test`, null, { headers: { 'myheader': 'test' }})
        .then(response => {
            console.log(response.data);
        });

后台把所有的接口都设置成cors，前端是可以自定义头部的。

但是如果我只是让其中一个接口cors

const Koa = require('koa');
const Router = require('koa-router');
const router = new Router();
const app = new Koa();



router.post('/api/test/', (ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , myheader');
    ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    ctx.body = {
        status: 'success'
    }
});

router.post('/api/test2/', (ctx, next) => {
    ctx.body = {
        status: 'success'
    }
});



app.use(router.routes()).use(router.allowedMethods());



app.listen(8089);


console.log('server start at 8089')

这时前端设置自定义头部，就会报错

说没有No 'Access-Control-Allow-Origin' header，但是我已经设置过Access-Control-Allow-Headers了。

如果前端把自定义头部去掉，这时又能跨域成功

// 正常跨域
axios.post(`http://localhost:8089/api/test`, null)
        .then(response => {
            console.log(response.data);
        });

求解决方法

Answer 1

那是因为你代码1的所有包括options请求 浏览器在非简单请求之前都会预检 而后面那段代码你并没有处理它 所以就直接405不会发送post请求

Answer 2

已找到解决方法
还需处理options请求

router.options('/api/test/', (ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , myheader');
    ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    ctx.status = 200;
    return;
});

至于之前，没有设置请求头就可以跨域的问题，原因是不设置请求头，我当前的跨域请求是个简单请求，不会预先发送一个options，所以仍然跨域成功了。