vue解决跨域方案

什么是跨域

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

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

解决方案

1.更改header

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

2.反向代理
客户端请求服务器端的数据是存在跨域问题的，而服务器和服务器之间是没有跨域的，可以相互请求数据。也就是说，我们可以配置一个代理的服务器，通过代理的服务器去请求服务器中的数据，请求出来的数据再返回到我们的代理服务器中，代理服务器再返回数据给客户端，这样就可以实现跨域访问数据了。
然后开始配置：

proxyTable: {
    
    
      '/mall': {
    
    
        target: 'http://www.wangyunfei.com',
        changeOrigin: true
      }
    },

使用：

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

就可以正常调用ajax了
3.jquery jsonp
只能用get方式请求，没有同源策略

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