解决webpack+vue-cli+vue-resource中跨域问题

2019年9月14日 186次阅读 来源: 李木子

前两天我遇到一个特别棘手的问题，问题呈现的样式大概是这个样子的
《解决webpack+vue-cli+vue-resource中跨域问题》

根据以往的经验看到XMLHttpRequest cannot load这段代码自然想到的是跨域问题，跟服务端讲了这件事情之后，服务端就加上了支持跨域的代码，但是前端还是调不到数据，然后查了很多资料，最后找到一种解决办法

在config文件下面有index.js文件里有一个叫proxyTable的配置参数

proxyTable: {
      '/restful':{
        target:'http://xxxxx/member/service/',
        changeOrigin:true,
        pathRewrite:{
            '^/restful':'/restful'
        }
      }
    },

changeOrigin这参数设置为true的时候，就可以虚拟一个本地代理的服务接收请求这样就可以解决跨域问题了
target是你请求接口的域名

接口调用的时候可以这么写

 this.$http.post(commonUrl + "/restful/member?op=getMember&access_token=111", {
          op: 'getMember',
        }).then(response => 
        }, response => {

        });
      },

如果

proxyTable: {
      '/restful':{
        target:'http://xxxxx/member/service/',
        changeOrigin:true,
        pathRewrite:{
            '^/restful':''
        }
      }
    },
'^/restful':'‘

restful后面是空的话那么接口就应该这么写

this.$http.post(commonUrl + "/restful/restful/member?op=getMember&access_token=111", {
          op: 'getMember',
        }).then(response => 
        }, response => {

        });
      },

上面我写的commonUrl主要是为了在传到生产环境的时候方便使用的一个全局变量

写一个全局的js

在里面设置一个全局变量commonUrl

const IS_DEBUG = true //如果是测试环境就是true，如果是生产环境就是false
const commonUrl = IS_DEBUG ? '':'http://xxxxx/member/service/'
    原文作者：李木子
    原文地址: https://segmentfault.com/a/1190000008910576
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞