跨域原理分析与解决方式

什么是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请求通过自动创建