vue-cli中跨域问题解决方法

webpack提供了配置代理的方法解决跨域

1 在vue-cli项目中打开webpack.dev.cof.js，如下

2 打开conifg目录下的index.js，在 proxyTable中进行配置

1 proxyTable: {
2         '/api': {
3             target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http
4             changeOrigin: true,
5             pathRewrite: {
6               '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
7             }
8         }
9 },

Vie

 1 proxyTable: {
 2         '/api': {
 3             target: 'http://192.168.10.202:8080/',//设置你调用的接口域名和端口号 别忘了加http
 4             changeOrigin: true,//设置true 代表跨域访问
 5             secure: false,  // 如果是https接口，需要配置这个参数
 6             pathRewrite: {
 7               '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
 8             }
 9         }
10 },               

3 配置好后，就可以获取后台提供的接口，然后进行页面的渲染了

1  this.$http.get('/api/user/add')
2  .then(res=>{
3             console.log(res);
4  }).catch(err=>{
5             console.log(err);
6  });

 

转载于:https://www.cnblogs.com/now-future/p/9887504.html