只有前端才会有跨域问题后端不受限制
一、什么是“同源策略”（Same-Origin Policy）
✅ 定义：
浏览器的 同源策略 是一种 安全机制，限制一个源的 JavaScript 访问另一个源的资源，以防止恶意网站窃取用户敏感信息。
✅ “同源” 的判断标准（协议 + 域名 + 端口）必须都相同：
条件 是否同源 http://a.com 与 http://a.com ✅ 是同源 http://a.com 与 https://a.com ❌ 协议不同 http://a.com 与 http://b.com ❌ 域名不同 http://a.com:8080 与 http://a.com:8081 ❌ 端口不同
二、什么是“跨域”
跨域（Cross-Origin） 指的是前端 JavaScript 在浏览器中访问“非同源”的接口资源。
举例：
假设你的前端页面地址是：
http://localhost:8080而你访问的后端接口是：
http://localhost:8081/api/user因为 端口不同，所以就是跨域请求，浏览器就会限制 JS 获取响应内容。
三、同源策略限制什么？
操作类型 是否受同源策略限制 <img src="">加载图片❌ 不受限制（可跨域） <link>加载 CSS❌ 不受限制（可跨域） <script>加载 JS❌ 不受限制（可跨域） AJAX（XHR、fetch）请求接口 ✅ 受限制（必须同源） 页面间的 Cookie 共享 ✅ 受限制（必须同源） iframe 操作其它页面 DOM ✅ 受限制（必须同源）
四、为什么存在同源策略？
为了解决以下安全问题：
防止 A 网站通过 JS 恶意读取 B 网站的用户信息（如 Cookie、localStorage、接口返回数据）
避免 CSRF 攻击等跨站请求攻击
浏览器不限制，用户信息可能被任意网站窃取
五、跨域请求报错长这样
Access to XMLHttpRequest at 'http://localhost:8081/api/user' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
六、跨域的常见解决方案
✅ 方式一：服务端配置 CORS（推荐方式）
什么是 CORS？
CORS（Cross-Origin Resource Sharing）是浏览器与服务端约定的 跨域资源共享协议。
不允许不是浏览器的一种安全限制么？为啥要后端配置允许跨域（CORS）？
🌐 浏览器的跨域请求是否被允许，是浏览器根据后端响应头是否包含 CORS 信息来决定的！
换句话说：
不是浏览器自己说了算。
是浏览器问后端：“你同不同意这个域名访问你？”
如果后端没明确说“我允许”，那浏览器就拦截响应，不让 JS 拿到。
原理：
浏览器在跨域请求时，会自动带上
Origin请求头服务端需要在响应头中明确允许的来源：
Access-Control-Allow-Origin: http://localhost:8080
浏览器收到后，才会允许 JavaScript 读取响应
Spring Boot 中配置 CORS：
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 允许所有路径 .allowedOrigins("http://localhost:8080") // 允许访问的域 .allowedMethods("GET", "POST", "PUT", "DELETE") .allowCredentials(true); // 允许携带 Cookie } }
✅ 方式二：前端开发时使用代理（只适合开发环境）
Vue/React 项目中，前端配置
devServer.proxy，把请求“伪装”转发到后端// vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true } } } }
✅ 方式三：JSONP（只能用 GET，已淘汰）
原理：利用
<script src="">不受同源策略限制，将数据包成 JS 函数调用只能解决 GET 请求
安全性差，功能弱，几乎淘汰
七、注意：跨域问题是浏览器行为，服务端或后端代码无此限制
场景 是否受同源策略限制 浏览器 + JS + Ajax ✅ 限制 后端发 Http 请求 ❌ 不限制 Postman 发请求 ❌ 不限制 curl 命令 ❌ 不限制
八、CORS 的核心意义总结一句话：
🌐 同源策略是浏览器为安全设定的限制机制，CORS 是服务端响应中声明“我允许谁来访问我”的机制。
如果服务端不显式声明允许，浏览器就自动屏蔽响应结果。
九、Vue + SpringBoot 是否跨域？
是跨域的，典型表现：
Vue 地址 Spring Boot 地址 是否跨域 http://localhost:8080 http://localhost:8081 ✅ 是 http://localhost:8080 http://localhost:8080 ❌ 否 http://frontend.example.com http://api.example.com ✅ 是