前端跨域(CORS)解决方案
来源:互联网 发布:河南三鹰实业知乎 编辑:程序博客网 时间:2024/06/05 22:47
同源指的是:同协议,同域名,同端口
一. 为什要设计同源策略?
浏览器出于安全方面的考虑,不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。
二.我们怎么从其他网站获取数据?
1. 服务器处理:
流程:
1.浏览器发现这次请求不符合同源策略,就自动在头信息之中,添加一个Origin字段。
GET /cors HTTP/1.1Origin: http://api.bob.comHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...
2.该请求到达服务器后,服务器会根据这个值来判断是否接受请求。如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段(如下所示)。如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应
Access-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Credentials: trueAccess-Control-Expose-Headers: FooBarContent-Type: text/html; charset=utf-8
3.浏览器收到响应后判断该相应头中是否包含Origin的值,如果响应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获,这时我们无法拿到响应数据。如果有则浏览器会处理响应,我们就可以拿到响应数
整个CORS通信过程,都是浏览器自动完成,不需要用户参与
2.JsonP:
原理:Script标签获取数据不受同源策略限制
function addScriptTag(src){ var script = document.createElement('script'); script.src = src; //跨域网址 document.body.appendChild(script); // 往页面插入元素后,会向跨域网址发出请求(src指定了跨域网址,得到响应后立即执行}window.onload = function(){ addScriptTag("http://example.com/ip?callback = foo'); //当页面加载完毕,即往页面中插入script元素}function foo(data){ console.log('your public ip address is: '+ data.ip)'}
上述代码中,设置callback 为foo方法,最后会回调foo,得到数据
注意:JSONP只能发 GET 请求(因为请求是放在
阅读全文
0 0
- 前端跨域(CORS)解决方案
- 前端跨域之CORS
- cors java跨域解决方案
- 前端跨域问题之----CORS详解
- AJAX的跨域问题CORS解决方案
- Tomcat7 CORS(资源跨域) 解决方案一
- [Ajax] -- AJAX 跨域解决方案 - CORS
- 跨域请求解决方案之--CORS
- 基于fetch cors + shiro 跨域解决方案
- 跨域解决方案之二-->CORS解决跨域
- 跨域解决方案之二-->CORS解决跨域
- 【AJAX】Ajax 跨域请求解决方案 - Using CORS
- 跨域访问cookie之CORS的完美解决方案
- 辛星浅析跨域传输的CORS解决方案
- 关于Ajax跨域启用CORS解决方案的思考
- 浅谈Ajax跨域的解决方案——CORS、JSONP
- 跨域访问cookie之CORS的完美解决方案
- 跨域访问cookie之CORS的完美解决方案
- 幸福的样子
- JDBC连接mySQL操作初级
- 自顶向下深入分析Netty(九)--ByteBuf
- 守护进程
- 加性操作符(加法+,减法-)
- 前端跨域(CORS)解决方案
- 由一个自定义的MapReduce程序报错学习到的东西
- 自顶向下深入分析Netty(九)--引用计数
- AndroidStudio快捷键
- mysql存储过程+mybatis调用返回多条数据
- 【51Nod1239】欧拉函数之和-杜教筛+哈希表
- 红绿灯简单模拟
- 使用Log4J2.properties作为Spring Boot的日志工具
- Apache Zeppelin 中 Python 2&3解释器