一、問題引出

有時,控制臺出現如下問題。

二、為什么會有跨域

2.1瀏覽器同源策略

瀏覽器的同源策略 （ Same-origin policy ）是一種重要的安全機制，用于限制一個源（ origin ）的文檔或

腳本如何與另一個源的資源進行交互。這個策略防止了惡意網站讀取其他站點上的敏感數據。

例如：被釣魚網站收集信息，使用 AJAX 發起惡意請求，傳遞轉賬信息給銀行服務器

作用： 保護瀏覽器中網站的安全， 限制 AJAX 只能向同源 URL 發起請求

源： Web 網頁內容的源由用于訪問它的 URL 的方案（ 協議 ）、 主機名 （域名）和 端口 三部分組成。只

有當協議、主機和端口都匹配時，兩個對象才具有相同的源。

同源： 網頁加載時所在源，和 AJAX 請求時的源（協議，域名，端口號）全部相同即為同源。

三、什么是跨域

跨域： 從 一個源 的文檔 / 腳本，加載 另一個源 的資源就產生了跨域。

例如：網頁所在源和 AJAX 訪問的源（協議，域名，端口）有一個不同，就發生了跨域訪問，請求響應

是失敗的。

四、后端解決方案

4.1****方案一：局部配置

CORS （后端） 采用 CORS （跨域資源共享），一種基于 HTTP 頭的機制 ，該機制通過允許服務器標示除了它自己

以外的其他源（域、協議或端口），使得瀏覽器允許這些源訪問加載自己的資源。

后端 ：設置 Access-Control-Allow-Origin 響應頭字段，允許除了它自己以外的源來訪問自己

的資源

前端 ：正常發起 AJAX 請求，無需額外操作

直接在控制器或者特定的方法上使用 @CrossOrigin 注解來為單個 API 接口添加 CORS 支持

4.2、方案二：全局配置

新增 config 包，在 config 包下新建 CorsConfig 配置類

@Configuration
public class CorsConfig implements WebMvcConfigurer {/*** 跨域處理** @param registry*/@Overridepublic void addCorsMappings(CorsRegistry registry) {// 所有接口registry.addMapping("/**")// 所有源.allowedOrigins("*")// .allowedOrigins("http://localhost:3000")// 允許的方法.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")// 允許的請求頭.allowedHeaders("*");// 是否允許攜帶 Cookie 等憑證信息// .allowCredentials(true);}
}

注意：如果同時設置了 allowedOrigins(“*”) 并開啟了 allowCredentials(true) ，這是不安

全的做法，因為這允許任何來源攜帶憑證訪問 API 。瀏覽器出于安全考慮，可能會拒絕這種設置。

五、前端解決方案

在開發環境中， 可以使用 vue-cli 內置的 代理功能 來解決跨域問題。在項目的 vue.config.js 文件

中添加如下配置：

// 開發環境代理配置
proxy: {'/api': {// 后端訪問基礎路徑target: 'http://localhost:8080',changeOrigin: true,pathRewrite: {'^/api': ''}}
}

同時，修改 request.js 里的基礎訪問路徑