首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Node.js
Express
PPA for Ubuntu
ppa:chris-lea/node.js
华为云
V2EX  ›  Node.js

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

  •  
  •   deepred · 162 天前 · 2277 次点击
    这是一个创建于 162 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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, 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, 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`)
            .then(response => {
                console.log(response.data);
            });
    

    求解决方法

    7 回复  |  直到 2018-06-20 09:35:05 +08:00
        1
    Sparetire   162 天前 via Android
    因为你这里单独接口的时候没有对 option 请求做出响应
        2
    deepred   161 天前
    @Sparetire 嗯,就是这个原因
        3
    deepred   161 天前
    @Sparetire 但是为啥单独接口的时候,我不加自定义头部,虽然没对 option 做响应,但是也跨域成功了?
        4
    KuroNekoFan   161 天前 via iPhone
    我没看错的话你代码不是就是这个意思吗……上面的代码是 router.all ,下面是 post (“ api/test ”)
        5
    dtysky   161 天前 via Android
    详细看看跨域控制协议吧,只有 simple request 不会发预置 options 请求,而它是有限制的(比如只能报告某些头部)。
        6
    Sparetire   161 天前 via Android
    @deepred 因为这里不带自定义头部不需要 option 请求,具体参考同源策略和跨域协商的细节
        7
    wotemelon   153 天前
    router.post('/api/test/', (ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', '*');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, myheader');
    ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    ctx.body = {
    status: 'success'
    }
    });

    你这里处理了`post`请求啊,你要把`post`改成`all`。在你没有单独拦截接口的时候,你用的是`all`,当然包括了`option`
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1039 人在线   最高记录 3821   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 21ms · UTC 17:49 · PVG 01:49 · LAX 09:49 · JFK 12:49
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1