前端如何正确理解跨域？

Question

作为一名前端开发者，有时候会遇到一些跨域问题，之前我参考一些教程网址的理解是：

客户端浏览器其实已经将请求发送出去了，服务器端也接收到了，但是服务器返回的数据在回来的时候被浏览器拦截了。

---

但是今天在和后端同事讨论的时候，他说我之前理解错了。下面是他的解释：

跨域的本质是保护服务器的数据，就好像你不能直接进我家来捣乱，你需要我给你钥匙（需要后端的 Access-Control-Allow-Origin 设置允许访问的来源 ）。但是按照这样理解的话，就推翻了我之前的理解，请求已经发送了，但是被服务器拒绝了。

问题： 我自己也有点疑惑，哪个理解才是正确的呢？

Answer 1

跨域的本质是保护用户的安全，如果没有跨域限制，任意网站就可以构造各种请求，拿到非授权的用户数据。
很简单的例子，比如思否的通知列表消息列表地址是 https://segmentfault.com//api/notice
那我给你一个链接，打开后会自动向这个api发起请求，我是不是就能拿到关于你账号的隐私信息了。
如果恰好有种应用有一种可以交易的虚拟财产，类似积分。我是不是可以在你不知情的情况下，通过接口直接转到我指定的账户。
是不是可以通过接口，利用你的账号随意发布各种信息。
同源策略就是为了保护这些东西的。

Answer 2

你可以看看 CORS（跨域资源共享）的定义 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

首先对齐一个共识，同源策略是浏览器的安全策略，脱离浏览器不存在跨域问题，相同的配置下， 两个 服务器 之间通信是不会存在跨域问题的，所以 跨域请求 被拒绝这个动作，是浏览器和服务端配合完成的，但主要的控制端还是浏览器

在 CORS 中你会看到 简单请求 和 非简单请求 的概念，无论是哪种请求，都会被发送到服务端，只不过有以下区别

• 对于简单请求，浏览器会屏蔽服务端的响应，这一点你可以用 node 起个服务来验证
• 对于非简单请求，浏览器会先发送一个 OPTIONS 请求去获取服务端的响应头，看服务端是否有配置相关的 CORS 策略来允许本次跨域请求，如果满足 CORS 的规则，浏览器就会继续发送真实的请求，否则就阻断掉

所以其实并不是 服务端 真正拒绝的跨域请求，是 浏览器 遵循 CORS 的规则阻断了真实的请求。你只需要理解到对于跨域请求，真正的 逻辑控制端 是在浏览器，只是浏览器支持 CORS 让服务端可以通过 响应头 来支持跨域而已

Answer 3

有人说是为了浏览器的安全，避免恶意脚本的执行，对客户端造成损害，但这是片面的。

也有人说是为了服务端的安全，避免服务器被攻击，但通过抓包可以发现，当出现跨域时，其实服务端的数据已经完整返回了，也就是说其实服务器对于跨域并不知情，所以这种说法也是片面的。

其实跨域真正的意义是为了保护数据资源的安全，例如：图片、字体、音视频、css、js等等。也就是说：我们可以通过跨域，去决定我们的私有资源对于哪些应用是开放的，对于那些资源是禁止访问的。

以生活中的例子来说：资源是超市货架上的物品，任何用户都可以进入超市，是不被拦截的。但是出门的时候，如果你没有付款，商品是会被拦截的。收银员这时候就相当于浏览器的角色，对商品和用户进行校验，只有用户付款之后，有了权限，才能让用户拿着商品离开，否则人离开，商品留下，也就是产生跨域了。

Answer 4

对于跨域请求，浏览器将在真实请求发送之前发送一条预检请求，询问服务器是否允许当前域进行访问。如果服务器未明确表示允许，那么浏览器不会发送真实请求，而是直接拒绝请求并抛出错误。

其中还有一些细节，比如简单请求和非简单请求等，参考：

• 跨源资源共享（CORS） - HTTP - MDN Web Docs
• 跨域资源共享 CORS 详解 - 阮一峰的网络日志