前端笔记：同源策略、跨域问题

只有前端才会有跨域问题后端不受限制

一、什么是"同源策略"（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	✅ 是