【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败

背景：

1、前端Web中有两个域名，a.com和b.com，其中a.com是访问主站（页面），b.com是数据提交接口的服务器（XHR请求）

2、a.com中用XHR调用b.com/cerate【没有指定协议】，保存数据，写法如下：

$.ajax({url: "//b.com/create",type: 'POST',data: requestParams,dataType: 'json',xhrFields: {withCredentials: true},crossDomain: true,async: false,success: function (data) {// ...},error: function (ret) {// ...
});

3、线上环境中，a.com和b.com的都在Nginx中配置了302强制跳转https

4、某个测试环境中，a.com没有跳转https，b.com有

问题：

1、线上环境，用户访问的是https://a.com，调用接口为https://b.com/create，跨域没有问题。

2、但是在测试环境中，测试人员直接打开了http://a.com页面，调用接口就变成为http://b.com/create，这里跨域预检时，b.com的Nginx反馈302跳转，报错。

{"readyState":0,"status":0,"statusText":"NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://b.com/create."}

分析：

1、readtState: 0说明请求没有发出去，被浏览器拦截了，可能情况有：

url格式不对
跨域失败
参数错误
用户取消
其它...

2、这里应该是跨域失败的问题，因为报错是faild to load url

3、之前没有关注过跨域重定向问题，StackOverFlow之：

https://stackoverflow.com/questions/18539403/chrome-cancels-cors-xhr-upon-http-302-redirect/38810391#38810391

4、W3C标准 https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

5、总的来说，就是对于非简单请求（XHR等），当跨域预检（Option请求）时，如果出现非20X等时，会直接失败，抛出readtState: 0

解决方法：

1、在Ajax中明确https协议，避免b.com预检时返回302

$.ajax({url: "https://b.com/create",type: 'POST',data: requestParams,dataType: 'json',xhrFields: {withCredentials: true},crossDomain: true,async: false,success: function (data) {// ...},error: function (ret) {// ...
});

2、修改测试环境a.com下的服务器，保持和线上环境一致，不让用户走到http://a.com，强制走https://a.com访问页面

总结：

之前一直觉得：

请求中不指定协议，使用//自动适配页面url的协议

是一个标准规范。现在看来，对于简单请求，比如页面跳转、图片加载等确实是一个好的做法，但是对于后端接口请求这类，可能需要具体场景斟酌。这句话可以改为：

简单请求中不指定协议，使用//自动适配页面url的协议

转载于:https://www.cnblogs.com/smileSmith/p/9277060.html

【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败相关推荐

django ajax页面跳转,Django中的AJAX GET请求后重定向
我是新的Django和AJAX(javascript). 最后,我可以发送一些参数到Django视图.这个视图呈现一个编辑表单. 我发送的参数和视图响应的形式与我需要的信息,但我不能重定向到从视图呈现 ...
ajax post请求导致的跨域和浏览器兼容性问题
前言过完年来我们老大安排我做的一个小需求,就是往现有的.net客服查询系统增加一个二级菜单,点击菜单在对话框中输入账号信息即可查询到该用户的信息.当时做这个的时候遇到了一些问题,具体可查看解决了异常 ...
JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
ajax post django,Django中的Ajax POST请求失败
我正在制作一个Ajax POST请求,但在我的视图中无法识别它. views.py中的代码: @csrf_exempt def upload(request): if request.method = ...
删除域控中的一个服务器,删除 Active Directory 域服务
在域控制器上运行 Dcpromo.exe 时,Active Directory 域服务安装向导检测到已在服务器上安装了 Active Directory 域服务 (AD DS).然后,该向导将启动并提 ...
form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题
1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...
函数内的ajax同步请求导致遮罩层失效、或者导致loading正在加载提示失效问题
功能需求编写点击按钮,弹出loading遮罩层提示正在加载中-,同时查询后台信息,拼接数据后渲染到列表时,为了保障渲染时,列表中的数据已经拼接完成.所以在for循环中使用同步ajax进行请求,在su ...
AJAX异步请求解决跨域问题的三种方式
一什么是跨域出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说We ...
IE8中使用$.ajax发送请求error输出拒绝访问
1.一开始的问题是以为是ajax的兼容问题,jquery版本也换了几个,然后竟然是浏览器的问题........... 问题:在url中使用了http直接请求外部资源,被浏览器拒绝访问了直接:一开始没有 ...

【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败

【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败相关推荐

最新文章

热门文章