随着前后端分离技术的越来越盛行，跨域问题也逐渐凸显了出来。跨域问题的根本原因：因为浏览器收到同源策略的限制，当前域名的js只能读取同域下的窗口属性。什么叫做同源策略？就是不同的域名, 不同端口, 不同的协议不允许共享资源的，保障浏览器安全。同源策略是针对浏览器设置的门槛。如果绕过浏览就能实现跨域，所以说早期的跨域都是打着安全路数的擦边球，都可以认为是 hack 处理。这一段是我从别的地方cp过来的，大家将就着看吧。

这里要注意的是，只有访问类型为xhr（XMLHttpRequest)的才会出现跨域。

以Google Chrome为例，浏览器以

"C:ProgramFiles(x86)GoogleChromeApplicationchrome.exe"    --disable-web-security--user-data-dir

中模式打开，右键点击浏览器快捷方式，在目标中输入上述代码即可解决（不推荐）。

JQuery中的正常AJAX请求代码片段

 JQuery中的使用JSONP的AJAX请求代码：

这时候我们看到 请求的网址自动变成了

http://www.tpadmin.top/Index/Test/crossDomain?callback=jQuery331015214102388989237_1534993962395&_=1534993962396

这是为什么呢？原来由于跨域访问的只限制xhr类型的请求（上文中已经说了），所以js中就利用了这一特点，让服务端不在返回的是一个JSON格式的数据，而是返回一段JS代码，将JSON的数据以参数的形式传递到这个函数中，而函数的名称就是callback参数的值，所以我们还需要修改服务端的代码，代码如下：

OK，现在问题解决了，但是JSONP存在着诸多限制，下面将列出两个个我知道的：

JSONP只支持GET请求，什么？你要提交表单，sorry，此路不通它只支持跨域HTTP请求

虽然只有两个，但是让很多人不得不放弃它，所以出现了下面的解决办法。

回归问题本质，跨域问题为什么会产生，上面已经说了，是由于浏览器的限制，那么在执行过程中有什么不同，下面两张度分析一下（主要看请求头的部分）：

这是非跨域请求

这是跨域请求

这时我们发现跨域访问的请求头中存在Origin的字段，用来记录当前的访问域名，我们可以再服务端增加一个响应头Access-Control-Allow-Origin来告诉浏览器我们支持它获取就可以了，代码实现：

那如果我有多个域名进行跨域访问呢

或者直接写成（很不安全，不推荐这么写）

到这里，其实已经结束了，但还有一些其他的特殊情况

为了应对种种限制，我们再来看一段代码

虽然我们在服务端加入了Access-Control-Allow-Origin响应头，但是如果出现上面所说的情况时，我们需要做一些特殊的设置，修改服务端代码为：

这里虽然成功了，但是我们发现每次请求的时候会出现两条请求记录（这个可不是我请求了两次，看下面截图）

这里我们需要进行一下区分（简单请求模式与非简单请求模式）

符合以上条件的为简单请求，否则为非简单请求，注意，非简单请求中，浏览器会默认发送两条请求，第一条为预检请求（OPTION），第二条为AJAX的请求，处于服务器的性能考量，我们需要将预检命令进行缓存，而不是每次都执行预检请求，我们可以修改代码如下：

这次我请求了两次，发现第二次请求没有发送预检请求，新增加的代码代表允许缓存的时间（3600S）。

另外还有一些常用的方法，我都放到这里了，有需要的小伙伴可以参考