腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

前后端解決跨域問題的6種方案分享

更新時(shí)間：2025年03月11日 10:49:40 作者：蘇三說技術(shù)

很多小伙伴第一次遇到跨域問題,大概率會(huì)一臉懵逼,這篇文章小編將為大家介紹一下前后端解決跨域問題的6種方法,希望對大家有一定的幫助

1 什么是跨域問題

很多小伙伴第一次遇到跨域問題，大概率會(huì)一臉懵逼：“我后端接口明明通了，Postman也能調(diào)，為啥瀏覽器就報(bào)紅字？”

其實(shí)這事兒得怪瀏覽器的“同源策略”（Same-Origin Policy）。

簡單說，瀏覽器覺得“不同源的請求都是耍流氓”。

比如你的前端跑在http://localhost:8080。

而后端在https://api.xxx.com:8000。

只要協(xié)議、域名、端口任何一個(gè)不同，就會(huì)被瀏覽器直接掐斷。

舉個(gè)栗子：

// 前端代碼（http://localhost:8080）
fetch('http://api.xxx.com:8000/user')
  .then(res => res.json())
  .then(data => console.log(data));  
// 瀏覽器控制臺(tái)報(bào)錯(cuò)：  
// Access to fetch from 'http://localhost:8080' has been blocked by CORS policy...

這時(shí)候，你就需要“跨域解決方案”來幫瀏覽器松綁了！

那么，如何解決跨域問題呢？

2 解決跨域問題的方案

2.1 CORS（跨域資源共享）

適用場景：前后端分離項(xiàng)目、接口需要兼容多種客戶端。

CORS是W3C標(biāo)準(zhǔn)，后端只需在響應(yīng)頭里加幾個(gè)字段，告訴瀏覽器“這個(gè)接口我允許誰訪問”。

后端代碼示例（Spring Boot版）：

// 方法1：直接懟注解（適合單個(gè)接口）
@CrossOrigin(origins = "http://localhost:8080")
@GetMapping("/user")
public User getUser() { ... }
 
// 方法2：全局配置（一勞永逸）
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

關(guān)鍵響應(yīng)頭：

Access-Control-Allow-Origin: http://localhost:8080（允許的源）

Access-Control-Allow-Methods: GET,POST（允許的方法）

Access-Control-Allow-Credentials: true（允許帶Cookie）

注意坑點(diǎn)：

如果用了allowCredentials(true)，allowedOrigins不能為*（必須明確指定域名）。

復(fù)雜請求（比如Content-Type是application/json）會(huì)先發(fā)一個(gè)OPTIONS預(yù)檢請求，記得處理！

2.2 JSONP

適用場景：老項(xiàng)目兼容、只支持GET請求（比如調(diào)用第三方地圖API）。

JSONP利用**<script>標(biāo)簽沒有跨域限制**的特性，讓后端返回一段JS代碼。

前端代碼：

function handleUserData(data) {
    console.log("收到數(shù)據(jù)：", data);
}
 
// 動(dòng)態(tài)創(chuàng)建script標(biāo)簽
const script = document.createElement('script');
script.src = 'http://api.xxx.com:8000/user?callback=handleUserData';
document.body.appendChild(script);

后端代碼：

@GetMapping("/user")
public String jsonp(@RequestParam String callback) {
    User user = new User("Tony", 30);
    // 把數(shù)據(jù)包進(jìn)回調(diào)函數(shù)里
    return callback + "(" + new Gson().toJson(user) + ")";
}

輸出結(jié)果：

handleUserData({"name":"Tony","age":30})

缺點(diǎn)：

只支持GET（傳參長度有限）。

容易被XSS攻擊（畢竟得信任第三方腳本）。

2.3 Nginx反向代理

適用場景：生產(chǎn)環(huán)境部署、微服務(wù)網(wǎng)關(guān)統(tǒng)一處理。

直接把跨域問題甩給Nginx，讓瀏覽器以為所有請求都是同源的。

Nginx配置示例：

server {
    listen 80;
    server_name localhost;
 
    location /api {
        # 轉(zhuǎn)發(fā)到真實(shí)后端
        proxy_pass http://api.xxx.com:8000;
        # 解決跨域
        add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
    }
}

此時(shí)前端請求地址改成同源：

fetch('/api/user') // 實(shí)際訪問 http://localhost/api/user → 被Nginx轉(zhuǎn)發(fā)

優(yōu)點(diǎn)：

前后端代碼零侵入。

能隱藏真實(shí)接口地址（安全加分）。

2.4 網(wǎng)關(guān)層統(tǒng)一處理

適用場景：Spring Cloud Gateway、Kong等API網(wǎng)關(guān)。

和Nginx思路類似，但更適合微服務(wù)場景，直接在網(wǎng)關(guān)層加CORS配置。

Spring Cloud Gateway配置：

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            allowed-origins: "http://localhost:8080"
            allowed-methods: "*"
            allowed-headers: "*"
            allow-credentials: true

2.5 WebSocket

適用場景：實(shí)時(shí)通信需求（聊天室、股票行情）。

WebSocket協(xié)議沒有跨域限制（因?yàn)槲帐蛛A段走HTTP，后續(xù)升級為長連接）。

前端代碼：

const socket = new WebSocket('ws://api.xxx.com:8000/ws');
socket.onmessage = (event) => {
    console.log('收到消息：', event.data);
};

后端代碼（Spring Boot）：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws");
    }
}

2.6 PostMessage

適用場景：頁面與iframe、彈窗之間的跨域通信。

通過window.postMessage實(shí)現(xiàn)不同窗口間的數(shù)據(jù)傳遞。

父頁面（http://parent.com）：

const childWindow = window.open('http://child.com');
childWindow.postMessage('我是你爹', 'http://child.com');

子頁面（http://child.com）：

window.addEventListener('message', (event) => {
    if (event.origin !== 'http://parent.com') return; // 驗(yàn)證來源
    console.log('收到爹的消息：', event.data);
});