一、跨域的原因：浏览器的同源策略
上述情况就是出现了跨域问题。
二、什么是同源策略呢？
????????出于安全考虑，默认在网页中，使用JS发送请求，请求的服务器和当前所在网页的服务器必须一样，即两个请求地址的 协议、域名、端口必须一致。
三、为什么会跨域呢？
????????目前，我们大量的前后端分离项目（后端有自己的服务器，前端有自己的服务器），各自有各自的服务器，互相交互时必出现跨域问题。
四、跨域的解决方案：（百度有9种，常用的有3种）
1、CORS：最推荐----只需要在服务器端添加白名单即可，允许其他来源的访问
这里由于我后端使用的node，所以下面代码是在node环境下使用CORS解决跨域的方案：
（1）下载第三方模块：npm install cors --save
（2）在你的app.js中加上下面代码（一定要放在接口的前面）
var cors = require('cors'); app.use(cors({ origin:['http://localhost:8083'], // 要设置白名单的 地址 methods:['GET','POST'], // 请求方式 alloweHeaders:['Conten-Type', 'Authorization'] }));
2、proxy：代理方案----次推荐，这是在前端解决跨域的问题
????????适合服务器代码不可修改的场景
????????利用服务器之间的交互没有跨域限制的特征
Vue中解决跨域问题
? ? ? ? Vue脚手架生成的项目包，自带一个服务器，支持快速设置代理服务器，临时解决跨域问题，不适合上线。
（1）在项目的根目录下(和README.md同级)创建固定名称的配置文件：vue.config.js
（2）在vue.config.js写以下代码（注意修改 target的属性的值 ）
// 配置文件vue.config.js 是固定名 // 必须放在项目根目录下，与src同级别 module.exports = { //devServer:开发服务器配置项 devServer: { // 小写的 procy proxy: { // 自定义代理名，请求时使用 '/bili': { //target:代表要跨域到哪（dy 要映射到 trget 的域名） target: 'https://api.bilibili.com', //注意：结尾不要加 / changeOrigin: true, //关键点：代表需要跨域 // 路径重写 pathRewrite: { // ^:正则的字符串开头 // 把开头的 /bili 替换成 '',即删除开头的 /bili // 如果不把 /bili 替换掉，那么请求地址中就会多一个 "/bili" ,请求路径就错了 '^/bili': '' } } } } }（3）修改我们的请求地址，用 /bili?替换target后面的代码
? ? ? ? 如：你要请求的地址是：‘https://api.bilibili.com/index.php’
? ? ? ? ????????你要改成： ‘/bili/index.php’
（4）重启服务器（只要修改配置相关文件都需要重启服务器）
?3、jsonp：前后端一起使用，现在已经基本不用了，所以这里简单简单介绍一下
1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；
2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；
3、所以jsonp能解决跨域的原理就是：利用<script></script>的“src”属性发送请求，就不会受跨域问题的影响了。