一、同源策略
- 什么是同源 如果两个URL的协议、域名、端口号完全一致，那么这两个URL就是同源的
window.origin 或 location.origin 可以得到当前源
- 什么是同源策略 会阻止一个域的javascript脚本和另外一个域的内容进行交互。
二、什么是跨域
当‘一个请求’ url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域
| 当前页面url | 被请求页面url | 是否跨域 | 原因 |
|---|---|---|---|
| www.test.com/ | www.test.com/index.html | 否 | 同源（协议、域名、端口号相同） |
| www.test.com/ | www.test.com/index.html | 跨域 | 协议不同（http/https） |
| www.test.com/ | www.baidu.com/ | 跨域 | 主域名不同（test/baidu） |
| www.test.com/ | blog.test.com/ | 跨域 | 子域名不同（www/blog） |
| www.test.com:8080/ | www.test.com:9999/ | 跨域 | 端口号不同（8080/9999） |
三、两个解决跨域方法
- JSONP 首先要知道不管 script 标签的 src 还是 img 标签的 sr c，或者说 link 标签的 href 它们是没有被同源策略所限制的，它们都会发送一个get请求去请求静态资源
<body>
<img src="https://img-pre.ivsky.com/img/tupian/pre/201402/18/pikachu.jpg" />
</body>
如此 JSONP 就可以利用 script 标签的 src 属性来实现跨域
核心思想：网页通过添加一个script元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。
JSON跨域实现
const script = document.createElement('script')
script.src = `http://xx.com:8888/friends.js?callback=func`
document.body.appendChild(script)
function func(data){
console.log(data)
}
- CORS CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。
普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
