跨域問題

官方概念：

當一個請求url的協(xié)議、域名、端口三者之間任意一個與當前頁面url不同即為跨域

本質(zhì)來說，是前端請求給到后端時候，請求頭里面，有一個 Origin ，會帶上 協(xié)議域名端口號等；后端接受到請求；如果沒有在“返回頭”里面放上“一些東西”，返回的時候，瀏覽器根據(jù)“同源策略”，就不會接受到返回；

注意：

Sec-Fetch-Site 頭部有幾個可能的值：same-origin: 請求源和目標是同一個站點same-site: 請求源和目標在同一個站點組（比如 sub1.example.com 和 sub2.example.com）cross-site: 跨站點請求none: 請求不是由網(wǎng)站發(fā)起的（比如用戶直接在地址欄輸入URL）

我們來看兩個例子：

這張是微博的任意頁面刷新出來的東西：
這一個請求就沒有跨域啥的，
然后我們看一個 B站的例子：

其實涉及到兩個概念：

• Origin，（例如：https://www.bilibili.com）
• Host ，（例如：https://data.bilibili.com）

Origin是發(fā)出方。Host是目的地：這里可以看上面請求里B站的Host

解決

后端，返回的頭里加上一個允許標記：給放過；
代碼僅供參考，實際要根據(jù)業(yè)務(wù)需求情況，還有一些其他配置，這里關(guān)注：config.addAllowedOrigin("http://localhost:3000");

// 方案1：后端配置 CORS（跨域資源共享）
@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();// 生產(chǎn)環(huán)境應(yīng)該明確指定允許的域名config.addAllowedOrigin("https://www.your-domain.com");// 如果有多個域名，可以分別添加config.addAllowedOrigin("https://admin.your-domain.com");// 明確指定允許的請求方法，而不是使用 "*"config.addAllowedMethod("GET");config.addAllowedMethod("POST");config.addAllowedMethod("PUT");config.addAllowedMethod("DELETE");// 明確指定允許的頭部，而不是使用 "*"config.addAllowedHeader("Authorization");config.addAllowedHeader("Content-Type");// 是否允許發(fā)送Cookieconfig.setAllowCredentials(true);// 預(yù)檢請求的有效期，單位為秒config.setMaxAge(3600L);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/api/**", config);return new CorsFilter(source);}
}

從前端也可以處理，生產(chǎn)環(huán)境的話，可以在Nginx里面配置

server {listen 80;server_name example.com;# 前端靜態(tài)文件location / {root /path/to/dist;try_files $uri $uri/ /index.html;}# 后端 API 代理location /api {# 跨域配置add_header Access-Control-Allow-Origin '*';  # 生產(chǎn)環(huán)境建議配置具體域名add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# 處理 OPTIONS 預(yù)檢請求if ($request_method = 'OPTIONS') {return 204;}# 反向代理配置proxy_pass http://localhost:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}
}

時光海海，日常焦慮 🍀，加油