Vue开发中数据交互解决跨域问题

使用webpack-simple脚手架构建的项目，在 webpack.config.js的devServer中增加proxy内容，设置代理

第一种：测试接口为： http://192.168.1.150:8000/api/rest/getClientMessage

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    // 配置服代理务器
    proxy: {
      '/api/*': {    // 只要指向/api/的请求，都会自动代理到下面的target的地址
            target: "http://192.168.1.150:8000",     //对方服务器地址
            secure: false,
            changeOrigin:true  
      }
    }
  }
  
  

_feachData() {         //这里请求自己服务器
     this.$http.get("/api/rest/getClientMessage").then( (res) => {
        console.log(res);
        let result = res.data;
        this.login = result;
})  

 

第二种： 接口为：http://192.168.1.150:8080/hydro/rest/getClientMessage( 会存在session丢失的问题）

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    // 配置服代理务器
    proxy: {
      '/webapp/api/*': {    // 只要指向/webapp/api/的请求，都会自动代理到下面的target的地址
            target: "http://192.168.1.150:8080/hydro",     //对方服务器地址
            pathRewrite: {
              '^/webapp/api':''
            },
            secure: false,
            changeOrigin:true  
      }
    }
  }
  
 _feachData() {
                 this.$http.get("/webapp/api/rest/getClientMessage").then( (res) => {
                    console.log(res);
                    let result = res.data;
                    this.login = result;
                })
            }

参考网址：Vue-cli代理解决跨域问题 https://www.jianshu.com/p/faa8303f8763

第三种：接口为"http://192.168.1.150:8080/hydro/xxx/xxx"

vue 前后端分离项目ajax跨域session问题解决：

问题：实现跨域请求时，每次ajax请求都是新的session，导致无法获取登录信息，所有的请求都被判定为未登陆。

解决：把proxyTable的映射路径改成项目名就可以了

// 配置服代理务器
    proxy: {
      '/hydro/': {    // 只要指向/hydro/的请求，都会自动代理到下面的target的地址
            target: "http://192.168.1.150:8080",     //对方服务器地址
            secure: false,
            changeOrigin:true  
      }
    }