下面是关于CORS跨域资源共享的详细讲解,希望能对你有所帮助。
CORS是什么
CORS(Cross-Origin Resource Sharing)跨域资源共享,是用来解决跨域访问的一种技术。由于浏览器实行同源策略(Same-Origin Policy),如果一个URL的协议、域名和端口都与当前页面的协议、域名和端口相同,则就是同源;否则就是跨域,跨域请求将被浏览器拒绝。
CORS允许浏览器向跨源服务器发送XMLHttpRequest请求,从而克服了同源策略产生的限制。在浏览器向服务器发送请求时,会先发送一个OPTIONS请求,以判断是否允许跨域访问。如果服务器允许,则返回一个带有Access-Control-Allow-Origin头的响应,表示允许当前域名的请求。客户端在收到响应后,再发送真正的请求。
CORS请求的流程
CORS请求的流程如下:
-
客户端通过XMLHttpRequest对象发起CORS请求。
-
浏览器发现这个请求跨域,会添加一个Origin头信息,表示这个请求来自哪个域名。
-
服务端接收到请求并处理,发送一个响应,在响应头中添加Access-Control-Allow-Origin头信息,表示该请求的响应可以被发起请求的源接受。
-
浏览器收到响应后,判断是否允许发送该响应内容。如果允许,则把响应内容作为XMLHttpRequest对象的response属性,并触发xhr的onload事件。如果不允许,则返回一个异常。
示例说明
下面给出两个CORS跨域的示例:
示例一:
假设有两个网站:http://a.com
和 http://b.com
。现在,在 http://a.com
的页面中通过JavaScript代码向 http://b.com
请求数据。由于跨域访问,浏览器会自动发送OPTIONS请求,判断是否允许跨域。所以在 http://b.com
的服务器端代码中,需要添加如下代码:
response.headers["Access-Control-Allow-Origin"] = "http://a.com"
表示允许 http://a.com
域名的请求。
示例二:
假设有两个网站:http://a.com
和 http://b.com
。现在,在 http://a.com
的页面中通过XMLHttpRequest对象向 http://b.com
请求数据。在服务器端,需要按照如下方式添加响应头:
response.headers["Access-Control-Allow-Origin"] = "http://a.com"
response.headers["Access-Control-Allow-Headers"] = "Content-Type"
response.headers["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"
-
第一行表示允许
http://a.com
域名的请求; -
第二行表示允许发送Content-Type请求头;
-
第三行表示允许POST、GET和OPTIONS方法的请求。
总结
CORS是解决跨域问题的一种通用方法,可以实现安全地访问跨域资源。在使用CORS时,需要按照规范添加Access-Control-Allow-*系列响应头信息,来实现对跨域请求的正确响应。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:你可能不知道的CORS跨域资源共享 - Python技术站