相信每一个前端在对接 API 时，多多少少一定遇过以下错误：

文章插图
【Same Origin Policy 简单弄懂同源政策与跨网域 (CORS)】 
虽然要解决此问题大部分还是需要后端帮忙，但前端也需要知道为什么会发生、要如何解决 。
同源政策 (Same Origin Policy)

文章插图
 

同源政策是网站安全的基础 。https://domain-a.com 只能存取自己网站裡的资源 (图片、影片、源码代等)，不允许网站 https://domain-b.com 来存取 。想要存取跨来源资源必须在某些特定情况下才被允许 。

文章插图
 
画清楚界线自己网站自己管，别人读取不到也改不了 。这很合理，不然若自己网站被别人任意修改、被恶意人士读取机密资讯那就糟糕了！若没有这层防护，坏人就可以任意新增删除我们在各大社区里面留言了、也可以轻易登入我们的银行帐户。
怎麽判断同不同源?只要 scheme、domain、port 一样就会被视为同源 (same-origin)，其他则是不同源

文章插图
 
若以 https://domain-a.com:80/hannah-lin 做范例，我们可以因此判断跟以下是否同源:
http://domain-a.com → 不同源．scheme 不同https://domain-a.com/mike → 同源https://news.domain-a.com → 不同源．domain 不同https://domain-a.com:81 → 不同源．port 不同https://domain-b.com → 不同源．domain 不同Note. IE 对于不同 port 会视为同源
但我网站明明就引入很多跨来源的资源啊？网页常见的跨来源资源真的不少，例如以下:

文章插图
 
没错，在某些情况下跨来源是被允许的，不受同源策略限制
跨来源嵌入通常被允许 (embed)像范例的 <script src=https://www.isolves.com/it/cxkf/qd/2021-12-24/”…”>、、