一、什么是跨域?
浏览器使用 ajax 发送请求时，如果请求的接口地址 和 当前打开的页面地址 不同源 称之为 跨域
ajax : 浏览器只有使用ajax发送请求才会出现跨域。href属性与src属性不会出现跨域
接口地址 ： ajax请求的url
打开的页面：当前页面的window.location.href
不同源 ： 浏览器使用ajax,向不同源的接口发送请求，称之为 跨域访问(只要 两个地址的 协议 、主机、端口 有一个不一致就是跨域)
二、常用解决跨域的办法
1) 原生jsonp
原理： 如果script标签的src属性的请求，服务器返回的是一个函数调用。则浏览器会执行这个函数。
流程：
a.设置script标签的src属性，向一个不同源的接口发送一个get请求
ps：JSONP只支持get请求，不支持post
b：src属性发送请求时，在参数中额外携带一个在页面中预先定义好的函数名（例如：fn）
c：服务器接收到请求之后，获取src传来的参数值（fn）
d：服务器将要响应的数据拼接成 函数调用格式，通过传参的方式将响应数据返回给浏览器。
2）jQuery中的JSONP
原理：和原生的jsonp 一样，但是只需要在发送请求时添加一句
dataType:'jsonp'
注意：jq使用jsonp不需要自己设置参数，jq会自动帮我们发送参数，参数值就是jq的success回调函数
3) cors方法（后台解决办法）
原理：服务器 在返回响应报文的时候，在响应头中 设置一个允许的header
res.setHeader('Access-Control-Allow-Origin', '*');
三、vue-cli中解决跨域的办法
在vue-cli的项目中还有一种解决跨域的方式：使用代理
具体方法：
a） 在 cli2 的项目中 修改config文件夹中index.js文件
在 cli3 的项目中 没有config文件夹，则在项目的根目录中创建vue.config.js，
在配置中填写以下配置：
proxyTable:{
'/api' :{ // 使用 '/api' 来代替 ' 原来的请求地址 '
target: ' ' ,// 原来的请求地址
changeOrigin:true, // 改变源
pathRewrite:{
'^/api': ' ' // 路径重写
}
}
}
` b）发送请求时
axios.get('/api/接口', ( res ) => {
console.log(res)
})
注意：设置完后记得重启项目
