一、什么是跨域
跨域是指从一个域名的网页去请求另一个域名的资源。比如:A上的页面获取B上的资源。
概念:只要协议、主机、端口有任何一个不同,都被当作是不同的域。
出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求。
二、如何实现跨域访问
解决方案:
- JSONP
- CORS
- postMessage等
比较常用的是CORS(跨域资源共享)
跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch )使用 CORS,以降低跨域 HTTP 请求所带来的风险。
服务器端对于CORS的支持,主要就是通过前后端HTTP HEADER设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
1. 简单模式(请求方法是 GET / POST / HEAD)
目标服务器在响应头(HTTP HEADER)里添加
Access-Control-Origin:http://xxx.com
浏览器就会允许http://xxx.com
跨域。如果添加通配符*
Access-Control-Origin:*
浏览器就会允许所有其他网站跨域。
2. 复杂模式(请求方法是PUT / DELETE / CONNECT / OPTIONS / TRACE / PATCH)
目标服务器在响应头(HTTP HEADER)里添加
Access-Control-Origin: http://xxx.com
Access-Control-Methods: GET, POST, HEAD, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
浏览器会发两次请求,第一次是OPTIONS请求,询问目标服务器是否允许PUT/PATCH...,如果允许则发真正的请求。