什么是ajax跨域问题？

简单来说，就是前台调用后台接口的时候，由于浏览器的同源策略（Same-origin Policy）过于严格，如果这个接口不是同一个域的，就会产生跨域问题。

为什么会发生ajax跨域？

• 浏览器限制
  浏览器出于安全的考虑，当它发现请求是跨域的时候，它会做一些校验，如果校验不通过，就会报跨域安全问题。

• 请求跨域
  所谓同源是指：域名、协议、端口相同
  如果发出去的请求不是本域的，协议、域名、端口，任何一个不一样，浏览器就认为是跨域的。

  
  image.png

• XHR（XMLHttpRequest）请求
  发送的是xhr（XMLHTTPRequest）请求才会产生跨域问题。如果发出去的请求不是XHR请求的话，即使跨域，浏览器也不会报错。

以上3个原因同时满足，才会产生跨域安全问题。

我们启动本地服务，来看一下浏览器里发出的请求的type

解决思路？

1、浏览器禁止检查：

想办法让浏览器不做跨域限制，那么就不会有跨域安全问题了。可以通过指定参数--disable-web-security，让浏览器不做这个校验，那么跨域问题就解决了。
设置方法
（1） 打开终端
（2） mac: 输入下面的命令( 需要替换路径中的yourname )
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/
windows：
在Dos中 浏览器应用对应文件Appliction文件夹下输入
chrome --disable-web-security --user-data-dir=g:\temp3

image.png image.png image.png
image.png

缺点：需要客户端每个人都做改动，不推荐使用。

2、JSONP(JSON with Padding)：

只有发送的是xhr（XMLHTTPRequest）请求才会有可能产生跨域问题，那么我们把请求改为非XHR请求，只要不是XHR请求，浏览器就不会报跨域问题。基于这个思路的解决方案是JSONP。
原理：
jsonp请求：jquery的ajax请求通过自动创建<script>标签，在页面上引入这个js脚本，脚本的请求地址后面带一个参数callback，callback的值是一个jquery随机生成的回调函数名称，传到后台。后台会返回这个函数调用，这个函数的传参，就是后台返回给前端的数据。
http://127.0.0.1:5000/baocunage?jsonpCallbackTest=jQuery21404576809447559216_1559269683775&age=sdf&_=1559269683776
由于jsonp请求发出的请求类型type是script，不是XML类型，那么浏览器就不会做校验，所以可以解决跨域问题。

前端：
dataType设置为jsonp
前后台约定一个callback名，默认为callback

$.ajax({
      type:'get',
      // url:'http://127.0.0.1:5000/baocunage',
      url:'http://192.168.0.204:5000/baocunage',
      // url:'https://campus.alipay-eco.com/topnews/user/ifLoginCORS',
      data:{
        age: $('#age').val()
      },
      dataType:'jsonp',
      jsonp:'jsonpCallbackTest',//默认是callback
      success:(data)=>{
        console.log('年龄：'+data.age)
      }
    })

使用jsonp后台需要改动：
获取与前端约定的callback的值，这个值就是后台需要返回的回调函数，该函数的参数，是要返回的json对象

let cb = searchObj.jsonpCallbackTest;
let data = {age:searchObj.age};
res.setHeader('content-type','text/javascript;charset=utf-8');
res.end(`${cb}(${JSON.stringify(data)})`)

jquery源码断点理解：
Default jsonp settings 设置回调方法名
Install callback 定义回调方法

image.png

Bind script tag hack transport 动态添加script标签，使用完之后销毁

image.png
image.png

优点：
使用简便，没有兼容性问题。
缺点：

• 它只支持get请求，而不支持POST等其他类型的请求。即使设置请求方式为post，请求也会默认为get请求，请求不会失败。
• 需要服务端改动代码，如果调用的接口不是自己的接口，就无法改动了。
• 存在安全问题。

3、CORS跨域（Cross-origin resource sharing，跨域资源共享）。

cors是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。
服务器基于http协议关于跨域方面的要求而做修改，设置参数，从而支持支持跨域。CORS跨域是服务端及浏览器之间自动完成，客户端不需要更数据访问逻辑。因此，实现 CORS 通信的关键是服务器

服务器改动：
在响应里添加如下字段

res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:3000');
//或者
res.setHeader('Access-Control-Allow-Origin','*');

发送请求的时候，浏览器是先执行还是先判断？

先看下什么是简单请求和非简单请求：

• 简单请求（同时满足一下两个条件）：
  *请求方法为：GET，HEAD，POST
  *并且请求header里：
  无自定义头
  content-type为以下几种：
  text/plain
  multipart/form-data
  application/x-www-form-urlencoded

• 常见的非简单请求（不满足简单请求条件的，就属于非简单请求）：
  请求方法为put , delete的请求
  发送json格式的请求
  带自定义头的请求

浏览器在发送跨域请求的时候，会先判断一下是不是简单请求。
如果是简单请求，就会先执行后判断。
如果是非简单请求，会先发一个Preflight预检请求给服务器，发送这个请求后，服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送以下头部与浏览器进行沟通：
Access-Control-Allow-Origin：与简单的请求相同。
Access-Control-Allow-Methods: 允许的方法，多个方法以逗号分隔。
Access-Control-Allow-Headers: 允许的头部，多个方法以逗号分隔。
Access-Control-Max-Age: 应该将这个 Preflight 请求缓存多长时间（以秒表示）。

预检请求检查通过之后，再把请求发出去。

非简单请求, 每次会发出两次请求, 这会影响性能. 我们可以在服务端设置Access-Control-Max-Age来缓存预检请求, 比如设置为60m, 也就是60m客户端只会在第一次的时候发送两个请求, 接下来60m内OPTIONS请求就被缓存起来了.

res.setHeader('Access-Control-Allow-Headers','content-type');
res.setHeader('Access-Control-Max-Age',60);

带cookie的跨域：
需要前后端都设置参数

xhrFields:{
        withCredentials:true 
      },

res.setHeader('Access-Control-Allow-Credentials',true)

注：带cookie的时候Access-Control-Allow-Origin不能使用*号匹配，只能用全匹配，所以可以这样设置Access-Control-Allow-Origin

let origin = req.headers.origin;
res.setHeader('Access-Control-Allow-Origin',origin);

优点：
CORS 通信与同源的 AJAX 通信没有差别，代码完全一样，容易维护。
支持所有类型的 HTTP 请求。
缺点：
存在兼容性问题，特别是 IE10 以下的浏览器（兼容性问题没有亲测）。
发送非简单请求时会多一次请求。

更多跨域解决方式

img标签
服务器代理
document.domain 跨域
window.name 跨域
location.hash 跨域
postMessage 跨域