背景
在实际开发中,经常会遇到我们的项目会请求不同域名的接口,这时就会出现了跨域问题,接下来我来介绍下我的理解与解决办法。
为什么会出现跨域问题?
浏览器安全的基石是“同源政策”(same-origin policy),同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。设想这样一种情况:A 网站是一家银行,用户登录以后,A 网站在用户的机器上设置了一个 Cookie,包含了一些隐私信息(比如存款总额)。用户离开 A 网站以后,又去访问 B 网站,如果没有同源限制,B 网站可以读取 A 网站的 Cookie,那么隐私信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
由此可见,同源政策是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。
同源的概念
源可以通过window.origin 与 location.origin得到;
源=协议 + 域名 + 端口号;
同源策略是指三个相同:协议相同、域名相同、端口相同;任何一个不同就会受到限制
限制范围
如果非同源,有三种行为会受到限制:
- 1.无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
- 2.无法接触非同源网页的 DOM。
- 3.无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)。
这篇文章主要介绍第三条,无法向非同源发送ajax请求的情况
如何实现跨域
在现实工作中,经常有一个公司有多个域名,而各个域名的项目又想相互访问数据,这是我们就可以使用cors方式
CORS
CORS全称Cross-origin resource sharing,中文是跨域资源共享,它允许浏览器向跨域的服务器,发出XMLHttpRequest请求,从而克服了 AJAX 只能同源使用的限制。所有浏览器都支持该功能;我们需要在被请求的响应头里面加上Access-Control-Allow-Origin:你的请求网址;