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

上述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="https://www.jb51.net/jquery-1.11.3.js"></script> </head> <body> <input type="button" value="GET_Default"> <input type="button" value="GET_JSON"> <input type="button" value="POST_Default"> <input type="button" value="POST_JSON"> <input type="button" value="PUT"> <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::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::3001 Referer::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请求来确认是否支持跨域,这时候服务端一定要返回支持跨域,并且直接返回即可。

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydsss.html