Vue中的跨域解决方案

Vue中的跨域解决方案

什么是跨域？
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。

# 协议跨域
http://a.baidu.com访问https://a.baidu.com；
# 端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
# 域名跨域
http://a.baidu.com访问http://b.baidu.com；

——————————————————————————————

解决方案

• 第一种，服务端（后台Java）更改header

res.header("Access-Control-Allow-Origin", "*"); // 允许的域名
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 允许的请求方法

• 第二种：代理
  原因就是因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。
  
  理解了这个原理之后，我们就可以按照这个逻辑去配置了。
  打开config/index.js,在proxyTable中添写如下代码:

proxyTable: {
       '/api':{
         target:'http://www.xxxxxxxx.com/',//跨域的地址
         changeOrigin: true,//是否跨域
         pathRewrith:{
           '^/api':''
         }
       }
    },

使用：

// 商品列表
  list (listParams) {
    return _http.request({
      type: 'post',
      url: '/mall/product/list.do',//直接调取接口
      data: listParams
    })
  }

就可以正常发送ajax请求了。

• 第三种：jquery jsonp

$.ajax({ 
      url: '地址', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        self.data = res.data.slice(0, 3)
        self.opencode = res.data[0].opencode.split(',') 
      } 
    })