个人做网站郊游的英,枫叶主机 wordpress,顺德高端网站设计,来凡网站建设公司1、浏览器的同源安全策略
没错#xff0c;就是这家伙干的#xff0c;浏览器只允许请求当前域的资源#xff0c;而对其他域的资源表示不信任。那怎么才算跨域呢#xff1f;
请求协议http,https的不同域domain的不同端口port的不同
好好好#xff0c;大概就是这么回事啦就是这家伙干的浏览器只允许请求当前域的资源而对其他域的资源表示不信任。那怎么才算跨域呢
请求协议http,https的不同域domain的不同端口port的不同
好好好大概就是这么回事啦下面我们讲2种中规中矩的办法CORSJSONP document.domainwindow.nameweb sockets就先别闹了腰不好 : )
2、CORS出来搞事了
这是W3C的大佬们搞出来的标准全称是跨域资源共享Cross-origin resource sharing。其实呢这个大部分还是后端人员的工作。我们先来看看整个流程下都发生了什么
在此之前需要知道简单请求 复杂请求这两个小朋友
简单请求 1): 请求方式只能是headgetpost 2): 请求头允许的字段AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Typeapplication/x-www-form-urlencoded、multipart/form-data、text/plain 三选一
2.复杂请求没错不满足上面的都是我啦
简单请求:
浏览器诶你小子要跨域是吧我得问问服务器大哥肯不肯往请求头添加origin亮一下牌面
有个奇怪现象谷歌游览器在非跨域情况下也会发送origin字段 请求头origin字段为当前域
服务器诶你是谁我来看看你的origin嗯嗯可以符合我的要求放行顺便告诉你老夫的规矩 其中最重要的就是Access-Control-Allow-Origin标识允许哪个域的请求。当然如果服务器不通过根本没有这个字段接着触发XHR的onerror再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段 //指定允许其他域名访问
Access-Control-Allow-Origin:http://172.20.0.206//一般用法*指定域动态设置3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息cookies,该值只能是true,否则不返回
Access-Control-Allow-Credentials:true上面第一行说到的Access-Control-Allow-Origin有多种设置方法
设置*是最简单粗暴的但是服务器出于安全考虑肯定不会这么干而且如果是*的话游览器将不会发送cookies即使你的XHR设置了withCredentials指定域如上图中的http://172.20.0.206一般的系统中间都有一个nginx所以推荐这种动态设置为请求域多人协作时多个前端对接一个后台这样很方便
withCredentials表示XHR是否接收cookies和发送cookies也就是说如果该值是false响应头的Set-Cookie浏览器也不会理并且即使有目标站点的cookies浏览器也不会发送。
复杂请求:
最常见的情况当我们使用put和delete请求时浏览器会先发送option预检请求不过有时候你会发现并没有这是后面我们会讲到缓存。
预检请求
与简单请求不同的是option请求多了2个字段Access-Control-Request-Method该次请求的请求方式Access-Control-Request-Headers该次请求的自定义请求头字段
服务器检查通过后做出响应 //指定允许其他域名访问
Access-Control-Allow-Origin:http://172.20.0.206//一般用法*指定域动态设置3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息cookies,该值只能是true,否则不返回
Access-Control-Allow-Credentials:true
//预检结果缓存时间,也就是上面说到的缓存啦
Access-Control-Max-Age: 1800
//允许的请求类型
Access-Control-Allow-Methods:GET,POST,PUT,POST
//允许的请求头字段
Access-Control-Allow-Headers:x-requested-with,content-type这里有个注意点Access-Control-Request-MethodAccess-Control-Request-Headers返回的是满足服务器要求的所有请求方式请求头不限于该次请求我一次性告诉你了别TM问我了
3、大家好我是渣渣辉是兄dei就来...呸呸呸我是JSONP
好啦jsonp的原理通过script标签引入一个js文件这个js文件载入成功后会执行我们在url参数中指定的函数并且会把我们需要的json数据作为参数传入有种回调的味道
例子 script srchttp://example.com/data.php?callbackdosomething/scriptscript typetext/javascriptfunction dosomething(jsondata){//处理获得的json数据}
/scriptjquery用法 script typetext/javascript$.getJSON(http://example.com/data.php?callback?,function(jsondata)){//处理获得的json数据};
/scriptJSONP的优缺点 优点它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制它的兼容性更好在更加古老的浏览器中都可以运行不需要XMLHttpRequest或ActiveX的支持并且在请求完毕后可以通过调用callback的方式回传结果。
缺点它只支持GET请求而不支持POST等其它类型的HTTP请求它只支持跨域HTTP请求这种情况不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 链接https://www.jianshu.com/p/89a377c52b48
