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) 请求方法是以下三种方法之一:
- head
- get
- post
2)http的头信息不超出以下几种字段:
- accept
- accept-language
- content-language
- last-event-id
- content-type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
而其他情况,非简单请求是那种对服务器有特殊要求的请求,比如请求方法是 put 或 delete ,或者 content-type 字段的类型是 application/json 。非简单请求的cors请求,会在正式通信之前,增加一次http查询请求,称为"预检"请求(preflight),即 options 请求。
关键
跨域的关键是浏览器获得服务器的认可,而服务器的认可就是header里的 access-control-allow-origin 。浏览器通过比较服务端返回的response中是否包含这个字段,以及包含这个字段的内容是否是当前网址来确定是否跨域。也就是说绕过浏览器是可以不用跨域的。
有个问题,看好多文章并没有指出。
第一点,带cookie问题。浏览器设置 withcredentials 为 true 则会带cookie发送给服务端。而服务端设置 access-control-allow-credentials 为 true 则接收, false 则不接受。关键是到filter里的时候才会决定是否设置response,那么这时候cookie已经存在request里了吧。(待验证)
验证:server端确实已经接受了cookie,即使设置为false,服务端仍旧接受cookie。而客户端也仍旧可以发送cookie。
第二点,简单跨域中,浏览器的请求直接发送给服务器,服务器返回是否支持跨域(即是否header加origin), 那么简单跨域究竟是请求了服务端几次?如果是1次,那么如果服务端不支持跨域,即没有设置allow,还会不会继续走下去,会不会继续request得到结果后放入response?就是不论跨域不跨域服务器是否都会执行这个request对应的计算。因为所有的设置header都是给浏览器告知的,和服务端限制无关。(待验证)
验证:即使服务端没有设置允许跨域,当客户端请求过来时,服务端仍旧完整执行了请求并返回,只是客户端没有接收。
服务端需要做点工作
针对上述两种跨域。server a需要写一个filter。
<filter> <filter-name>cors</filter-name> <filter-class>com.test.filter.corsfilter</filter-class> </filter> <filter-mapping> <filter-name>cors</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </filter>
filter:
public class corsfilter extends onceperrequestfilter { @override protected void dofilterinternal(httpservletrequest request, httpservletresponse response, filterchain filterchain) throws servletexception, ioexception { url requesturl = new url(request.getrequesturl().tostring()); string hostname = requesturl.gethost(); string origin = request.getheader("origin"); int index = hostname.indexof("."); if(index > -1) { string domainhost = hostname.substring(index, hostname.length()); if(!stringutils.isempty(origin) && origin.contains(domainhost)) { response.addheader("access-control-allow-methods", "get, post, put, delete, options"); response.addheader("access-control-allow-origin", origin); response.addheader("access-control-allow-credentials", "true"); response.setheader("access-control-max-age", "3600"); response.addheader("access-control-allow-headers", "content-type, cookie, " + "accept-encoding, user-agent, " + "host, referer, " + "x-requested-with, accept, " + "accept-language, cache-control, connection"); if (request.getheader("access-control-request-method") != null && "options".equals(request.getmethod())) { // cors "pre-flight" request response.setstatus(200); return; } } } filterchain.dofilter(request, response); } }
上述filter是为了同一个domain下,不同子域名可以跨域访问,而其他domain则不可以,因为我们需要共享cookie,所以设置 access-control-allow-credentials 为 true . 如果设置为 false 则不接受cookie。
客户端,即server b如果想要发送cookie则需要设置 withcredentials 为 true .
//原生 var xhr = new xmlhttprequest(); xhr.withcredentials = true; //jquery $.ajax({ ... xhrfields: { withcredentials: true } ... });
注意:针对非简单跨域的时候发送 options 请求,服务端a需要告诉浏览器是否支持跨域即可,不要往下走了,不然到指定的requestmapping发现不支持这个方法就会很尴尬了,所以直接返回。
下面针对简单跨域和非简单跨域做测试:
<!doctype html> <html lang="en"> <meta charset="utf-8"> <title>test</title> <script src="jquery-1.11.3.js"></script> </head> <body> <input type="button" value="get_default" onclick="testgetdefault()"> <input type="button" value="get_json" onclick="testgetjson()"> <input type="button" value="post_default" onclick="testpostdefault()"> <input type="button" value="post_json" onclick="testpostjson()"> <input type="button" value="put" onclick="testput()"> <script> var geturl = "https://local.corstest.com.net:8443/contentmain/getdepositsroomandrateplaninfo.json?htid=759"; var posturl = "https://local.corstest.com.net:8443/contentmain/savereservationdeposits.json?htid=759"; function testgetdefault(){ sendajax("get",geturl, "json", "application/x-www-form-urlencoded"); } function testgetjson(){ sendajax("get",geturl, "json", "application/json; charset=utf-8"); } function testpostdefault(){ sendajax("post",posturl, "json", "application/x-www-form-urlencoded"); } function testpostjson(){ sendajax("post",posturl, "json", "application/json; charset=utf-8"); } function testput(){ sendajax("put",posturl, "json", "application/json; charset=utf-8"); } function sendajax(type, url, datatype, contenttype){ $.ajax( { type: type, url: url, xhrfields: { withcredentials: true }, datatype : datatype, // accept type contenttype: contenttype, //request type, default is application/x-www-form-urlencoded success: function(result){ console.log(result); }, error: function (xhr) { console.log(xhr); } }); } </script> </body> </html>
结果:
get default:
只发送一个正常的get请求。
get json:
先发送一个options如下:
general: request url:https://local.corstest.com.net:8443/contentmain/getdepositsroomandrateplaninfo.json?htid=759 request method:options status code:200 ok remote address:127.0.0.1:8443 response headers: access-control-allow-credentials:true access-control-allow-headers:content-type, cookie, accept-encoding, user-agent, host, referer, x-requested-with, accept, accept-language, cache-control, connection access-control-allow-methods:get, post, put, delete, options access-control-allow-origin:http://cros.corstest.com.net:3001 content-length:0 date:thu, 30 mar 2017 12:47:44 gmt server:apache-coyote/1.1 request headers: accept:*/* accept-encoding:gzip, deflate, sdch, br accept-language:zh-cn,zh;q=0.8 access-control-request-headers:content-type access-control-request-method:get connection:keep-alive host:local.corstest.com.net:8443 origin:http://cros.corstest.com.net:3001 referer:http://cros.corstest.com.net:3001/test.html user-agent:mozilla/5.0 (windows nt 6.3; wow64) applewebkit/537.36 (khtml, like gecko) chrome/56.0.2924.87 safari/537.36
然后再发送正常的get请求。
post default:
正常发送请求。
post json: 先发送一个options请求。然后再发送正常的请求。
其他同理,总之,非简单跨域会多发一次options请求来确认是否支持跨域,这时候服务端一定要返回支持跨域,并且直接返回即可。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读
-
Javascript实现跨域后台设置拦截的方法详解
-
jQuery使用JSONP实现跨域获取数据的三种方法详解
-
jQuery使用JSONP实现跨域获取数据的三种方法详解
-
Javascript实现跨域后台设置拦截的方法详解
-
AJAX请求数据及实现跨域的三种方法详解
-
在Ajax中使用Flash实现跨域数据读取的实现方法_javascript技巧
-
javascript跨域的4种方法和原理详解_javascript技巧
-
动态创建script标签实现跨域资源访问的方法介绍_javascript技巧
-
在Ajax中使用Flash实现跨域数据读取的实现方法_javascript技巧
-
如何设置iframe高度自适应在跨域情况下的可用方法_javascript技巧