1. 同源策略：https://www.cnblogs.com/twinkleG/p/15357210.html

2. CORS 跨域：https://www.cnblogs.com/twinkleG/p/15359409.html

3. 以上兩個連結是個人對同源策略以及CORS跨域的一些淺薄理解，做專案遇到了跨域問題，

看了一些博主的理解，借鑑一下：https://juejin.cn/post/6978831126727131173【稀土掘金】，

同時也看了一些視訊：https://www.bilibili.com/video/BV1e7411j7T5?p=37

　　瀏覽器傳送請求到非同源伺服器，會導致跨域問題，而伺服器與伺服器之間的通訊是不存在跨域問題的，因此我們在本地 npm run serve 搭建的伺服器，先接收到我們的請求，之後由本地伺服器轉發請求到目標伺服器即可獲取資源，再將資源從本地伺服器傳送給瀏覽器，這是 vue.config.js 中配置 devServer 解決跨域的思路。

　　proxy中，本地伺服器攔截瀏覽器請求，由本地伺服器轉發給target值【目的伺服器】。

module.exports = {
  devServer: {
    host: 'localhost',
    port: '8083',
    proxy: {
      '/api': {  // /api 表示攔截以/api開頭的請求路徑
        target: 'http:127.0.0.1:3000', // 跨域的域名
        changeOrigin: true, // 是否開啟跨域
      }
    }
  }
}

　　以上配置和下面這種配置效果是一致的：pathRewrite 路徑重寫，將 target 中 /api 變為空值。

module.exports = {
  devServer: {
    host: 'localhost',
    port: '8083',
    proxy: {
      '/api': {
        target: 'http:127.0.0.1:3000/api',
        changeOrigin: true,
        pathRewrite: {  // 重寫路徑
          '^/api': ''  // 把/api變為空字元
        }
      }
    }
  }
}

　　當我們傳送一個請求時，target 值會與請求URL進行拼接，這才是最終要請求的地址：

// axios請求
axios({
  method: 'get',
  url: '/api/newList'
}).then(res=>{})

　　當攔截到以 /api 開頭路徑時，把設定的跨域域名與路徑拼接就變為了 http:127.0.0.1:3000/api/newList