跨域请求限制的通俗解释

什么是跨域

• 想象一下，每个网站就像一个独立的小国家，有自己的边界（域名）。比如，https://example1.com是一个国家，https://example2.com是另一个国家。浏览器就像是这些国家之间的海关，它会检查从一个国家的网站（域名）发送到另一个国家网站的请求，这就是跨域的概念。简单来说，跨域就是指一个网页（从一个域名）去请求另一个不同域名下的资源。
• 例如，你在浏览器中打开了一个网页 A，它的网址是https://websiteA.com，这个网页里的 JavaScript 代码想要去获取https://websiteB.com这个网址下的数据，这就是跨域请求。因为websiteA.com和websiteB.com是不同的 “国家”（域名）。

为什么会有跨域限制（安全考虑）

• 还是用国家来类比。如果没有跨域限制，就好比一个国家的坏人（恶意脚本）可以随便跑到另一个国家（其他域名的网站）去偷东西（获取数据）或者搞破坏（篡改数据）。
• 比如说，你登录了一个银行网站https://bank.com，这个网站存储了你很多重要的个人信息和资金信息。要是没有跨域限制，另一个恶意网站https://badguy.com就可以通过在自己的网页里编写 JavaScript 代码，轻松地访问https://bank.com的信息，把你的钱转走或者窃取你的个人隐私，这是非常危险的。

跨域的常见场景和例子

• 前端 JavaScript 请求数据：
  • 假设你正在开发一个新闻网站https://news.com，页面上有一个天气预报的模块。你想从一个专业的气象数据网站https://weather.com获取天气数据来展示给用户。你的 JavaScript 代码在https://news.com这个域名下，当它尝试使用fetch或XMLHttpRequest等方法去请求https://weather.com的数据时，就会遇到跨域问题。因为浏览器会检查到这是一个跨域请求，会阻止这个请求，除非https://weather.com允许https://news.com来获取它的数据。
• 加载外部资源：
  • 比如你在自己的网页https://mywebsite.com上想使用一个来自其他网站https://cdn.example.com的图片或者字体。正常情况下，浏览器会允许加载这些资源，因为加载图片和字体等静态资源的跨域策略相对宽松。但是，如果https://cdn.example.com的管理员出于某些原因（比如限制资源的使用范围、防止盗链等）设置了不允许某些域名访问其资源，那么你的网页在加载这些资源时就会出现问题，这也是一种跨域相关的情况。
• 跨域的解决方案类比：
  • 就像两个国家之间如果要进行合法的交流（跨域请求），需要有一些合法的手续（跨域解决方案）。比如，https://weather.com（被请求的网站）可以给https://news.com（请求的网站）发放一个 “通行证”（设置Access - Control - Allow - Origin头信息），允许它来获取自己的数据。或者通过一个中间的 “大使馆”（代理服务器）来传递信息，让请求看起来像是在同一个国家内部进行的（通过代理服务器转发请求，使浏览器认为没有跨域）。