一、跨域问题的由来
同源策略(Same origin policy)是一种约定,它最早由浏览器厂商Netscape公司提出,现在已经成为浏览器最基础最核心的安全功能。所谓同源(即指在同一个域)就是两个页面的具有相同的协议(protocol),主机(host)和端口号(port),例如http://a.com与https://a.com就不是同源的,因为协议不同。
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。
在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题。
同源策略主要限制了三个方面:
- 当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
- 当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
- 当前域下 ajax 无法发送跨域请求。
但是有三个标签是允许跨域加载资源:
<img src='xxx'>
<link href='xxx'>
<script src='xxx'>
跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。
二、跨域的解决办法
常见的解决方案有很多种,比如:
- JSONP跨域
- 跨域资源共享 CORS
- document.domain + iframe 跨域解决方案
- window.name