same-origin(同源) and cross-origin(跨源)

同源(Same-origin)和跨域资源访问(CORS)

在web应用安全中,同源策略是很重要的概念。如果两个网页的协议、主机名(精确匹配)和端口都是相同的,则被认为是同源。同源策略会阻止JavaScript进行跨边界(源)请求。这个策略可以避免一个页面的恶意脚本获取另一个页面的敏感信息。

跨源(Cross-origin)

顾名思义,这就是不同源了。只要不满足上述同源的条件,两个网页就属于不同源。

一般访问如下,这是no-cors requests

<link rel="stylesheet" href="https://example.com/path/to/style.css">
<img src="https://example.com/path/to/image.png">

这样访问如果不成功,可以尝试发起cors request,添加了一个属性crossorigin="anonymous"

<link crossorigin="anonymous" rel="stylesheet" href="https://example.com/path/to/style.css">
<img crossorigin="anonymous" src="https://example.com/path/to/image.png">

跨源部署场景实M现

这个需求的初衷是想将一个网站的数据提交到另一台服务器上去。比如主站点cooltools.top和api.cooltools.top指向的不是同一个IP地址,那么就属于跨源。

参考资源