VUE项目跨域问题解决

　　一.什么是跨域？

　　跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

　　当一个浏览器的两个tab页中分别打开百度和谷歌的页面时，当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以google.com下的js脚本采用ajax读取baidu.com里面的文件数据是会报错的。

　　二.解决跨域问题

　　1.后台更改header

 header('Access-Control-Allow-Origin:*');//允许所有来源访问

2 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式  

　　

　　2.使用jsonp实现，网页通过script标签向服务器请求json数据，服务器受到请求后，将数据放在一个指定名字的回调函数的参数里面传给前端。

<script src="http://www.test.com/getData?callback=getData"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    // 服务器返回的数据会放到回调函数里面
    function getData(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

　　

　　3.使用JQuery提供的jsonp，这里需要注意的是请求方式只能是get,post请求不可以

methods: { 
  getData () { 
    var self = this 
    $.ajax({ 
      url: 'http://www.yingaxiang.json', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        self.data = res.data.slice(0, 3) 
        self.opencode = res.data[0].opencode.split(',') 
      } 
    }) 
  } 
}

　　这里vue引入Jquery需要在webpack.base.conf.js文件中配置一下：

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

在需要的组件里引入也可以在main.js里全局引入

import $ from 'jquery'

 

　　4.在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

　　　当然我们在创建axios的时候需要把baseURL修改为“/api”

proxyTable: { 
  '/api': {  //使用"/api"来代替"https://www.cnblogs.com/yingaxiang" 
    target: 'https://www.cnblogs.com/yingaxiang/', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'https://www.cnblogs.com/yingaxiang/' //路径重写 
      } 
  } 
}

　　

　　不过通过这种方式解决跨域在打包部署的时候会有问题，所以：

let serverUrl = '/api/'  //本地调试时 
// let serverUrl = 'https://www.cnblogs.com/yingaxiang/'  //打包部署上线时 
export default { 
  dataUrl: serverUrl + '' 
}