跨域问题|Historia

同源 = 协议 + 域名 + 端口 完全相同

例如

跨域（Cross-Origin）这个问题，本质上是浏览器的安全设计
重点：跨域是浏览器的问题。

所以当前端页面通过JavaScript跨域请求后端时，后端返回的数据会被当前浏览器拦截。

请求 发出去了 响应 也回来了 但浏览器 不让你 JS 代码读

为了防止恶意网站偷你在另一个网站的“身份和数据”

这就是 同源策略存在的根本原因。

举个例子，假设没有同源策略：

你已经登录了银行网站：https://bank.com并携带了Cookie: session=abc123；

然后你访问了一个恶意网站：https://evil.com；

由于 evil.com 网站的 JS 代码中编写了以下代码：

fetch("https://bank.com/api/balance")
  .then(res => res.json())
  .then(data => {// 你的余额、账户信息
    uploadToHacker(data)
  })

此时浏览器会 自动带上 cookie ，银行会根据cookie认为这个请求是你本人发送的，银行服务端会将数据直接返回，此时evil.com网站就会执行 uploadToHacker(data)，讲拿到的data传给了黑客，导致你的数据泄露，这就是灾难级漏洞。

这种攻击有个名称叫CSRF（Cross-Site Request Forgery） 跨站请求伪造：攻击者诱导用户，在已登录状态下，对目标网站发起“非本人意愿”的请求。

所以浏览器这一层必须要在响应数据返回时拦截，进行跨域判定，不允许 JS 读取跨域响应的内容。

CORS（Cross-Origin Resource Sharing）跨域资源共享

服务端主动告诉浏览器：这个跨域我允许

即服务端在响应头中携带允许开宇的域名信息

Access-Control-Allow-Origin: https://a.com
Access-Control-Allow-Credentials: true

浏览器执行流程是：

跨域问题本质上是浏览器的同源策略导致的，是为了防止恶意网站在用户已登录的情况下，跨站读取敏感数据。

它限制的是前端 JS 读取跨域响应内容，而不是请求本身。

CORS 通过服务器声明允许的来源，来让浏览器放行跨域数据。

PS：企业级的应用中，会使用BFF架构，包含了解决跨域问题的方案；

BFF（Backend for Frontend，前端专用后端）是一种服务于特定前端（或客户端）的后端架构模式，旨在优化前后端协作，提升整体系统的效率和可维护性。

BFF的核心思想

在传统的前后端分离架构中，后端通常提供一套通用的API，但不同客户端（如Web、iOS、Android、IoT设备等）可能有不同的数据需求。BFF通过为每种客户端定制独立的中间层来解决这一问题，它作为前端与后端微服务之间的适配层，负责：