koa2做接口基于webpack的vue-cli做页面跨域问题解决

做一个项目的时候,

前端界面,使用的vue-cli做的项目初始化(基于webpack);开发的时候,使用8080端口

接口服务使用的是koa做支撑,端口在8090上;

这时候前端请求接口就会遇到跨域问题

这个时候有两种最方便的解决办法:

  1. 如果是跨域,服务端只要在请求头上加上CORS,客户端即可跨域发送请求。
  2. 变成同域,即可解决跨域请求问题。
  3. 或者你设置nginx也可以;

第一种,采用kcors即可解决,第二种,变成同域请求。

打开根目录下的config/index.js,(vue-cli会自动生成此文件)

找到dev下的proxyTable,利用这个proxyTable我们能够将外部的请求通过webpack转发给本地,也就能够将跨域请求变成同域请求了。

proxyTable改写如下:

//利用proxyTable我们能够将外部的请求通过webpack转发给本地,也就能够将跨域请求变成同域请求了。
proxyTable: {
    ‘/api’:{
        target:’http://localhost:8090/’,
        changeOrigin:true
    }
},

上面的意思是,我们在组件里请求的地址如果是/api/xxxx实际上请求的是http://localhost:8889/api/xxxx,但是由于webpack帮我们代理了localhost的8889端口的服务,所以我们可以把实际是跨域的请求当做是同域下的接口来调用。

~~

未经允许不得转载:朱邦邦的博客 » koa2做接口基于webpack的vue-cli做页面跨域问题解决

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址