首先再次明确一点，跨域是浏览器的安全机制

它规定的所有的请求必须同源

• 同源（Same-Origin）条件：
• 协议相同（http / https）
• 域名相同
• 端口相同

那么如何判断跨域需要前端去解决还是后端去解决呢

前端处理：

在发起请求阶段时，如果报跨域的报错

Access to fetch at 'https://baidu.com/' from origin 'http://biaoblog.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

后端处理：

在请求成功发起后，但浏览器拦截响应

No 'Access-Control-Allow-Origin' header is present on the requested resource

解决方案：后端在响应头加上 CORS 头，如：

Access-Control-Allow-Origin: http://前端域名

Access-Control-Allow-Origin的作用：

Access-Control-Allow-Origin 是 CORS（跨域资源共享）机制中的核心响应头，它告诉浏览器：

“我允许哪些来源（域名）的前端网页访问我的接口资源。”

补充：

这里有个比较让人容易混洗的地方

fetch请求中的mode可以设置cros字段，

看起来好像是让前端请求设置了跨域请求，然后实际上不是的

mode: 'cors' 并不是“开启跨域访问权限”的开关，而是告诉浏览器——“我要遵守 CORS 规则”。

也就是说，它不是“放行”，而是“执行安全检查”。

如果后端没返回正确的头：

即便你写了：

fetch('https://api.xxx.com', { mode: 'cors' })

浏览器仍然会严格执行安全策略：

• 检查不到 Access-Control-Allow-Origin
• 就直接阻止前端读取响应内容
• 抛出那句经典错误 👇

Access to fetch at 'https://api.xxx.com' from origin 'http://xxx' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

换句话说：

mode: 'cors' 不是万能钥匙，而是「请浏览器帮我遵守跨域安全规范」。mode: 'cors' 只是声明“我要跨域”，

真正能不能跨域，要看后端有没有给你 Access-Control-Allow-Origin。

mode的几种声明作用：

same-origin（默认）：只能请求同源资源，前后端同域部署

cors：按 CORS 规则请求跨域资源，现代前后端分离项目

no-cors：请求跨域资源但不能访问响应内容，加载图片、上报埋点等