前言

在Web端Vue項目開發(fā)過程中，跨域問題是不可避免的；在我參與的Vue項目中，使用服務器代理的解決方案；針對不同的環(huán)境（開發(fā)環(huán)境/生產(chǎn)環(huán)境），采用了不同的服務器代理方案；

服務器代理的原理大概是這樣：
代理服務器和訪問源（請求端）是同源的，但和被訪問服務器（資源端）是不同源的，但服務器之間的訪問不受瀏覽器同源策略的影響(即不必擔心是否有跨域問題)，那么我們即可請求到同源服務器上的從被訪問服務器上的獲取到的請求資源了；

Webpack配置proxy實現(xiàn)代理——開發(fā)環(huán)境

參與的項目工程通過Vue-cli3來搭建的，因此沒有了Webpack的顯式配置文件；需要我們在工程根目錄下手動創(chuàng)建vue.config.js去實現(xiàn) Webpack的配置

Vue cli3 工程目錄結構

新增Vue.config.js

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8084,
    open: true,// vue項目啟動時自動打開瀏覽器
    proxy: {
      '/api': { // '/api'是代理標識，用于告訴node，url前面是/api的就是使用代理的
        target: "http://219.216.5.26:8080", //目標地址，一般是指后臺服務器地址
        changeOrigin: true, //是否跨域
        pathRewrite: { // pathRewrite 的作用是把實際Request Url中的'/api'用""代替
          '^/api': "" 
        }
      }
    }
  }
}

這樣配置完成后，我們發(fā)起的每次http請求的Request Url的前面一部分都會和我們本地的源一樣；
舉例：

Axios.get("/api/bookCate")

我們項目跑在開發(fā)環(huán)境下的http://localhost:8080上，那么上述請求的Request Url的就是 http://localhost:8080/api/bookCate;這應該就是我們的代理服務器中該資源的地址，與客戶端同源；而數(shù)據(jù)的實際來源則是http://219.216.5.26:8080/api/bookCate，這樣即實現(xiàn)代理跨域；

該方法的原理

目前猜測這個代理服務器可能是Node；

Nginx代理——生產(chǎn)環(huán)境

nginx版本：1.16.1
修改nginx.conf文件下的serve下配置：

        listen       8088;  //端口號
        server_name  localhost; 
        // 打包之后項目放到的路徑；
        location / {
            root   dist;  // dist是指和nginx.exe同級的dist目錄 ，一般默認是html文件夾
            index  index.html index.htm;  // dist文件夾下的html文件
        }
        // 此處是服務器代理部分，為解決http請求跨域問題
        // 若服務器已設置允許跨域，則這塊就不需要了
        location /api{
            proxy_pass http://219.216.5.26:8080/api； 
                // 被代理服務器地址
        }

舉例：

Axios.get("/api/bookCate") 
//其實想要訪問的是 "http://219.216.5.26:8080/api/bookCate" 下的資源

生產(chǎn)環(huán)境下的,我們項目跑Nginx服務器監(jiān)聽的http://localhost:8088上，那么上述請求的Request Url的就是 http://localhost:8088/api/bookCate;
這應該就是我們的代理服務器中該資源的地址，與客戶端同源；
而數(shù)據(jù)的實際來源則是http://219.21.5.5:9903/api/bookCate，這樣即實現(xiàn)代理跨域；