跨域的由來

　跨域問題來源於JavaScript的同源策略，表示只有 協議+域名+埠號 (如存在)相同，即相同的域，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。

　當一個請求url的協議、域名、埠三者之間的任意一個與當前頁面url不同即為跨域。跨域的本質是瀏覽器基於同源策略的一種安全的手段，是一種約定，它是瀏覽器最核心也是最基本的安全功能。注意伺服器之間的請求是不存在跨域問題的！

　如下：圖片轉自 https://blog.moonlet.cn/archives/563

　　請求一個介面時瀏覽器控制檯出現'Access-Control-Allow-Origin'就說明請求跨域了。

vue-cli4.x配置 proxy 代理解決跨域

　原理：

• 將域名傳送給本地的伺服器
• 再由本地的伺服器去請求真正的伺服器
• 因為請求是從伺服器端發出的，所以就不存在跨域的問題了

　vue-cli4所有的配置都在 vue.config.js 完成，所以在 vue.config.js 中做以下配置解決跨域：

module.exports = {
    devServer: {
        host: 'localhost',
        port: '8080',//埠號為前端的埠號
        proxy: {
          '/api': { // 匹配所有以 '/api'開頭的請求路徑
 

            target: 'http://localhost:4000', // 代理目標的基礎路徑
            changeOrigin: true, // 允許跨域
            pathRewrite: {// 重寫路徑: 去掉路徑中開頭的'/api'
              '^/api': ''
            }
          }
        },
    }
}

　　注意：修改vue.config.js 檔案後需要重啟服務。前端使用axios請求時路徑直接使用/api代替。