跨域的定义
在浏览器环境下,跨域是指一个域下的文档或脚本试图去请求另一个域下的资源
域:由协议+域名+端口组成
正常情况下,如果我们通过ajax去请求另一个域下的资源时是不会成功的,浏览器默认会阻止这种行为,因为它违背了浏览器的同源策略。
什么是同源策略?
同源策略(SOP: Same Origin Policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。
简单来说就是指 协议 + 域名 + 端口 三者相同,如果违背了同源策略那么以下行为将得不到浏览器的支持:
- 获取Cookie、LocalStorage等
- 获取DOM 和 Js对象
- 发送 AJAX 请求
常见跨域场景
URL | 是否允许通信 | 说明 |
---|---|---|
http://www.abc.com/a.js http://www.abc.com/b.js | 是 | 同协议、同域名、同端口 |
http://www.abc.com/a.js https://www.abc.com/b.js | 否 | 不同协议 |
http://www.abc.com/a.js http://www.xxx.com/b.js | 否 | 不同域名 |
http://www.abc.com/a.js http://www.abc.com:8080/b.js | 否 | 不同端口 |
常见的跨域报错提示
Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
以上就是关于跨域的简单介绍,在实际工作中,很多时候我们都需要跨域去执行一些操作,这就意味着我们要想办法解决这个问题,下篇文章小编将会介绍自己在工作中遇到的场景又是怎么样去解决的!