新人求问koa+vue前后端分离开发中的问题，求大神

问答

FFantasyGao发布于9 年前最后回复9 年前|9 回复5984 浏览0 收藏

利用koa做后端，提供数据接口api，用vue-cili构建vue项目做前端，做路由控制和展示，由于他们都启动了不同端口服务，那他们的数据怎么交换的，跨域请求吗

查看回复

FantasyGao#1·9 年前

引用 yinxin630前端build出静态文件, 后端koa利用koa static提供静态文件访问. 或者前后单独部署, nginx配置反向代理, 比如/api开头的请求转发后端, 其它为前端

@yinxin630 谢谢，利用nginx是不是还是解决了跨域问题呀

来自酷炫的 CNodeMD

hackjus#2·9 年前

@yinxin630 undefined

yinxin630#3·9 年前

引用 FantasyGao@yinxin630 谢谢，利用nginx是不是还是解决了跨域问题呀来自酷炫的 CNodeMD

@FantasyGao 当然可以解决啊，你还是没搞懂我说的意思，看这个吧：http://www.cnblogs.com/gabrielchen/p/5066120.html

jackhutu#4·9 年前

我想只有用源代码来拯救你了. https://github.com/jackhutu/jackblog-api-koa

zhaomenghuan#5·9 年前

我一般使用CORS解决：

let config = {
    // 服务端 host
    host: 'http://localhost:3000',
    // 前端开发环境的 host
    webHost: 'http://localhost:8080',
    // 跨域白名单
    whiteOrigins: [
        'http://localhost:8080',
        'http://localhost:3000'
    ]
};

然后再接口中设置响应头：

// 跨域支持
app.all('/api/*', (req, res, next) => {
    const origin = req.headers.origin;
    if (config.whiteOrigins.indexOf(origin) !== -1) {
        res.header('Access-Control-Allow-Origin', origin);
        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
        res.header('Access-Control-Allow-Credentials', true);
        res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, OPTIONS, DELETE');
    }
    next();
});

FantasyGao#6·9 年前

引用 yinxin630@FantasyGao 当然可以解决啊，你还是没搞懂我说的意思，看这个吧：http://www.cnblogs.com/gabrielchen/p/5066120.html

@yinxin630 感谢👍

来自酷炫的 CNodeMD

FantasyGao#7·9 年前

引用 jackhutu我想只有用源代码来拯救你了. https://github.com/jackhutu/jackblog api koa

@winky 谢大神，已star

来自酷炫的 CNodeMD

FantasyGao#8·9 年前

引用 zhaomenghuan我一般使用CORS解决：然后再接口中设置响应头：

@zhaomenghuan 明白了，多谢多谢

来自酷炫的 CNodeMD