跨域前言

首先我们必须要搞懂跨域问题跟谁相关 它跟浏览器相关脱离了浏览器范围不存在跨域问题的因为这一切得规则都是浏览器搞出来的它为什么要搞出这样的规则呢？主要出于安全的考虑，正是因为有了同源策略才可以让用户更加放心的点开每一个链接。

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

跨域原因说明	示例
域名不同	www.jd.com 与 www.taobao.com
域名相同，端口不同	www.jd.com:8080 与 www.jd.com:8081
二级域名不同	item.jd.com 与 miaosha.jd.com

浏览器的同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 请点击浏览器的同源策略

什么是同源？

同源就是两个源进行去比较他们域名相同 他们协议一样 和端口一样这就是同源

了解完同源策略完事我们就可以了解一下跨域的解决方案？

跨域是浏览器做出的限制和后端没有关系

第一是jsonp

jsonp实现原理 ：主要是利用动态创建script标签请求后端接口地址，然后传递的callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json

第二是代理方式

前端代理在vue中有一个vue.config.js里面配置一个proxy里有一个target属性指向跨域链接。修改完重启项目就可以了。实际上就是启动了一个代理服务器绕开同源测略，在请求的时候，通过代理服务器获取到数据在转给浏览器

// vue 的开发服务器代理配置
// vue.config.js
module.exports = { 
  devServer: { 
  // 配置开发服务器
     proxy: 
       { // 配置代理
        "/api"{ // 若请求路径以 /api 开头
              target: "http://dev.taobao.com", // 将其转发到http://dev.taobao.com 
          }, 
      },
    }, 
  };

第三是CORS

CORS全称叫跨域资源共享，主要是后端工程师设置后端代码来达到前端跨域请求的\

优点

• 在服务端进行控制是否允许跨域，可自定义规则
• 支持各种请求方式

缺点

• 会产生额外的请求