vue 解决跨域

时间:2021-7-4 作者:qvyue

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做代理,我也没有试过第二种,也是查阅资料总结的。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。