vue 请求数据，总结下vue跨越问题

第一种.服务器服务器不支持跨域请求

1.当跨域无法请求的时候我们可以工程目录下新建vue.config.js。

添加下面的代码：

module.exports = {
  proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
},

将target设置为我们需要访问的域名。

2.然后在main.js中设置全局属性：

Vue.prototype.HOST = '/api'

3.我们就可以在全局使用这个域名了，如下：

var url = this.HOST + '/movie/in_theaters'

this.$http.get(url).then(res => {
  this.movieList = res.data.subjects;
},res => {
  console.info('调用失败');
});

第二种：服务器端支持跨域

String data = JsonUtil.toJsonNonNull(pubXtzdBos);
    
OutputStream out = response.getOutputStream(); 
    
out.write(data.getBytes("UTF-8"));//以UTF-8进行编码  
    
response.setHeader("Access-Control-Allow-Origin", "*");

//告诉浏览器编码方式  
response.setHeader("Content-Type","text/html;charset=UTF-8" ); 

就是能支持跨域那就可以使用jsonp来请求了。jsonp实际上就是通过添加script标签来添加的，

请求回来的数据也是js格式。axios目前还不支持，只能自己手动创建script标签，把请求的地址赋给script标签的src属性，最后添加到head标签上，等到请求返回再把标签删掉：

jsonpRequest: function (a, e) {
  this._ajaxTimer && clearTimeout(this._ajaxTimer);
  this._ajaxTimer = setTimeout(function () {           
    var request_script = document.createElement('script');
    request_script.setAttribute("id", "request_script");   
    request_script.src = 'http://xxxx'+'&t=' + Date.now();
    window.callback = function (response) {
      // 移除脚本
      document.body.removeChild(document.getElementById('request_script'));
      console.log(response.content);
    }
    document.body.appendChild(request_script);
  }, 500);
}

讲真，本地开发适合第一种吧 然后可以正常使用axios进行ajax请求了，
但这样只能在开发模式下才能使用。打包部署的时候建议使用nginx做代理，我也没有试过第二种，也是查阅资料总结的。