>[danger]跨域問題怎么產生，如何解決？ 跨域問題是因為**瀏覽器的同源策略**產生的。 瀏覽器的同源策略是一種安全機制，它限制了從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。**同源指的是兩個 URL 的協議、主機和端口號都相同。** 常用的跨域解決方案包括： 1. **CORS：跨域資源共享**（Cross-Origin Resource Sharing），是一種允許瀏覽器向跨域服務器發送 Ajax 請求的機制，支持現代瀏覽器，服務器端需要設置 Access-Control-Allow-Origin 頭信息，指定允許的源或通配符，從而實現跨域請求。 2. **代理**：在同源頁面內部發送 AJAX 請求到同域服務器，由服務器代理轉發請求到跨域服務器，最后再將結果返回給同源頁面。 3. WebSocket：WebSocket 是一種 HTML5 協議，它使得瀏覽器和服務器之間可以建立持久化的連接，可以直接使用 Socket 進行通信，避免了瀏覽器的跨域限制。 >[info]技術詳解 ### 跨域資源共享（CORS） 跨域資源共享（CORS）是一種跨域解決方案，它允許瀏覽器向跨域服務器發出 XMLHttpRequest 請求，從而實現了前端頁面和后端 API 的跨域訪問。 CORS 通過在 HTTP 頭部添加 **Access-Control-Allow-Origin** 等字段來告知瀏覽器該請求是否允許跨域，因此需要后端設置相應的響應頭信息。 具體而言，可以在響應頭中設置 **Access-Control-Allow-Origin** 字段來指定允許訪問的源頭，也可以設置其他相關字段： ``` Access-Control-Allow-Credentials Access-Control-Allow-Methods Access-Control-Allow-Headers ``` 等，來進一步控制跨域請求的行為。 ### Vue.js中的proxy代理 Vue.js 提供了一個開箱即用的代理功能，可以通過配置 vue.config.js 文件中的 devServer.proxy 字段來實現代理。 與 CORS 不同，代理是通過將 API 請求轉發到同源的服務器上去處理，然后再將其返回給前端頁面。 例如，我們可以將所有以 /api 開頭的請求都代理到 http://localhost:3000 服務器上去處理，即可實現跨域訪問： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 這里通過設置 **target 字段**來指定代理的目標服務器，**changeOrigin 字段**允許修改請求頭中的 origin 字段，**pathRewrite 字段**允許對路徑進行修改，從而實現對API請求的代理。