做网站项目实例,成都网站推广优化公司,阿里巴巴的网站建设,百度在线下载背景#xff1a; 1、前端Web中有两个域名#xff0c;a.com和b.com#xff0c;其中a.com是访问主站#xff08;页面#xff09;#xff0c;b.com是数据提交接口的服务器#xff08;XHR请求#xff09; 2、a.com中用XHR调用b.com/cerate【没有指定协议】#xff0c;保存…背景 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没有跳转httpsb.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
