vue中请求跨域问题解决

今天做页面时，因为请求百度地图的接口报跨域的错误。显然是因为浏览器的同源策略限制，使得我们无法拿到目标地址的数据。

百度百科

同源策略，它是由Netscape提出的一个著名的安全策略。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。 [1] 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

而将要讲到的jsonp并非一种数据格式，而是解决JSON跨域获取的解决方案。通过jsonp获取到的数据已经不是json格式，而是js类型的数据。

其主要原理如下:

1.浏览器的同源策略把跨域请求都禁止了
2.html的<script>标签是例外，可以突破同源策略从其他来源获取数据
3.因此我们可以通过<script>标签引入jsonp文件，然后通过一些js操作获取数据

那么怎么在vue中具体实现呢？

1.安装依赖npm i -S vue-jsonp

2.在main.js中引入vue-jsonp，并通过use方法挂载到vue中

import VueJsonp from "vue-jsonp"
vue.use(VueJsonp)

3.在组件中用jsonp请求数据

this.$jsonp("http://.....具体地址")
           .then((res)){
             //对数据进行操作
}

----------------------结束------------------