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

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

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

 1 devServer: {
 2     historyApiFallback: true,
 3     noInfo: true,
 4     overlay: true,
 5     // 配置服代理务器
 6     proxy: {
 7       '/api/*': {    // 只要指向/api/的请求，都会自动代理到下面的target的地址
 8             target: "http://192.168.1.150:8000",     //对方服务器地址
 9             secure: false,
10             changeOrigin:true  
11       }
12     }
13   }
14   
15   
16 
17 _feachData() {         //这里请求自己服务器
18      this.$http.get("/api/rest/getClientMessage").then( (res) => {
19         console.log(res);
20         let result = res.data;
21         this.login = result;
22 })

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

 1 devServer: {
 2     historyApiFallback: true,
 3     noInfo: true,
 4     overlay: true,
 5     // 配置服代理务器
 6     proxy: {
 7       '/webapp/api/*': {    // 只要指向/webapp/api/的请求，都会自动代理到下面的target的地址
 8             target: "http://192.168.1.150:8080/hydro",     //对方服务器地址
 9             pathRewrite: {
10               '^/webapp/api':''
11             },
12             secure: false,
13             changeOrigin:true  
14       }
15     }
16   }
17   
18  _feachData() {
19                  this.$http.get("/webapp/api/rest/getClientMessage").then( (res) => {
20                     console.log(res);
21                     let result = res.data;
22                     this.login = result;
23                 })
24             }

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

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

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

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

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

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