>[danger]跨域是什么引起的，用什么方法實現跨域？ >[info]建議回答 跨域是因為**瀏覽器的同源策略**引起的。常用的跨域解決方案包括： 1. **CORS：跨域資源共享**（Cross-Origin Resource Sharing），是一種允許瀏覽器向跨域服務器發送 Ajax 請求的機制，支持現代瀏覽器，服務器端需要設置 Access-Control-Allow-Origin 頭信息，指定允許的源或通配符，從而實現跨域請求。 2. **代理**：在同源頁面內部發送 AJAX 請求到同域服務器，由服務器代理轉發請求到跨域服務器，最后再將結果返回給同源頁面。 3. WebSocket：WebSocket 是一種 HTML5 協議，它使得瀏覽器和服務器之間可以建立持久化的連接，可以直接使用 Socket 進行通信，避免了瀏覽器的跨域限制。 >[info]瀏覽器的同源策略 瀏覽器的同源策略是一種安全機制，它限制了從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。**同源指的是兩個 URL 的協議、主機和端口號都相同。** 瀏覽器的同源策略包括以下幾個方面： 1. JavaScript 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB。 2. JavaScript 無法讀取非同源網頁的文檔對象模型（DOM）。 3. XMLHttpRequest 和 Fetch **不能發送跨域請求**。 4. iframe 不能訪問非同源頁面的 DOM。 5. HTTPS 頁面中的 HTTP 資源無法加載，反之亦然。 6. 端口號不同也被認為是不同的源。 同源策略的目的是保護用戶數據免受惡意網站的攻擊。如果兩個頁面在同一個源下，那么它們可以相互訪問并交換數據，但是如果它們不同源，則它們之間就會存在安全隱患。比如，某個網站的 JavaScript 可能試圖從其他網站讀取用戶的敏感信息，如果沒有了同源策略的限制，那么這種攻擊就無處不在。 >[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請求的代理。