Javascript实现跨域后台设置拦截的方法详解

本文主要给大家介绍了关于Javascript跨域后台设置拦截的相关内容，分享出来供大家参考学习，话不多说了，来一起看看详细的介绍吧。

子域名之间互相访问需要跨域

结论放在开头：

1.服务端必须设置允许跨域

2.客户端带cookie需要设置 withCredentials

3.无论服务端是否允许跨域，该request都会完整执行

4. options 预请求需要设置返回空，不然requestMapping没有支持该方法则出错

环境搭建

需求

首先需要搭建两个环境。一个是提供API的server A，一个是需要跨域访问API的server B。

Server A提供了一个api。完整的请求request是：

https://local.corstest.com.net:8443/contentmain/getDepositsRoomAndRatePlanInfo.json?htid=759&_=1490855801818

Server B有个页面page:

http://cros.corstest.com.net:3001/test.html

并且这个page需要请求server A的api。

但由于跨域保护，请求失败：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'xxxxx' is therefore not allowed access.

修改host

首先本地配置两个指向127.0.0.1的host，方便互相跨域。

127.0.0.1 local.corstest.com.net 127.0.0.1 cros.corstest.com.net

启动项目A，方便提供API。

至于项目B，测试跨域只要写个html静态页面即可。那么就写一个test.html，并通过一个工具发布：

 browser-sync 

安装

npm install -g browser-sync

本地启动一个test.html

browser-sync start --server --files "*.html" --host "cros.corstest.com.net" --port 3001

关于跨域CORS

ruanyifeng 的文章里说浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

其中同时满足一下2种标准即为简单跨域：

1) 请求方法是以下三种方法之一：

2）HTTP的头信息不超出以下几种字段：

而其他情况，非简单请求是那种对服务器有特殊要求的请求，比如请求方法是  PUT 或 DELETE ，或者 Content-Type 字段的类型是 application/json 。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight），即 options 请求。

关键

跨域的关键是浏览器获得服务器的认可，而服务器的认可就是header里的 Access-Control-Allow-Origin 。浏览器通过比较服务端返回的response中是否包含这个字段，以及包含这个字段的内容是否是当前网址来确定是否跨域。也就是说绕过浏览器是可以不用跨域的。