JS跨域産生的原因及解決方案

  跨域的由來

　跨域問題來源于JavaScript的同源政策，表示隻有 協定+域名+端口号 (如存在)相同，即相同的域，則允許互相通路。也就是說JavaScript隻能通路和操作自己域下的資源，不能通路和操作其他域下的資源。

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

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

　　

　　請求一個接口時浏覽器控制台出現'Access-Control-Allow-Origin'就說明請求跨域了。 

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

　原理：

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

module.exports = {
    devServer: {
        host: 'localhost',
        port: '8080',//端口号為前端的端口号
        proxy: {
          '/api': { // 比對所有以 '/api'開頭的請求路徑
            target: 'http://localhost:4000', // 代理目标的基礎路徑
            changeOrigin: true, // 允許跨域
            pathRewrite: {// 重寫路徑: 去掉路徑中開頭的'/api'
              '^/api': ''
            }
          }
        },
    }
}