vue 前端解决跨域

造成跨域的三个场景：

1.ip(域名)相同，端口不同

2.ip不同，端口相同

3.协议不同，如一个是http，一个是https

 

解决方法：

1，前端

由于使用的webpack 初始化的vue 项目则修改如下文件：

config/index.js

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8099',//后端接口地址
        changeOrigin: true,//是否允许跨越
        pathRewrite: {
          '^/api': ''//重写,
        }
      }
    },

注：

前端访问服务地址：

http://localhost:8088/

后端接口地址：

http://localhost:8099/

 

前端接口访问代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

created() { }, mounted() {   this.initData() }, methods: {   initData() {     this.axios.create({baseURL: '/api'}).get('/echart/echart3').then(({ data }) => {       console.info(data)       if (data.code === 1) {         console.info(data.dataList)       } else {         console.info('error')       }     })   },

　

 

虽然请求端口还是8088，但是已经成功反问到8099的数据了。

代码地址请转移：https://gitee.com/zhiqishao/echart-demo

 2.后端接口加注解解决，这样前端就不用改了