vue-cli 3.0之跨域請求devServer代理配置

參考： https://blog.csdn.net/Liu_yunzhao/article/details/90520028

　　　https://www.cnblogs.com/xiangsj/p/8905648.html

 

概念

　　同源策略

　　　　同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。

　　　　可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。
　　　　所謂同源是指：協議、域名、端口都相同。

 

　　跨域

　　　　跨域就是不同源，就是不滿足協議、域名、端口都相同的約定。

　　　　

　　　　如：看下面的鏈接是否與 http://www.test.com/index.html 同源？

　　　　　　http://www.test.com/dir/login.html 同源
　　　　　　https://www.test.com/index.html 不同源 協議不同(https)
　　　　　　http://www.test.com:90/index.html 不同源 端口不同(90)
　　　　　　http://www.demo.com/index.html 不同源 域名不同(demo)

 

　　　　當協議、域名、端口中任意一個不相同時，就是不同源。若不同源之間相互請求資源，就算作跨域。

 

跨域請求devServer代理幾種配置

　　1.  先在項目的根目錄下新建 vue.config.js 文件　　

　　2.  在module.exports內設置devServer來處理代理

　　3. 統一代理

　　　　1). 設置 axios 的 baseURL 值（任意）

　　　　

　　　　axios.defaults.baseURL = '/api'

　　　　這樣會為所有的 請求url 前面都加上 ‘/api’，方便做 統一代理。

 

　　　　假設請求的url地址為 /allin/policy/getProductInfo

 　　axios({
     　　 ...
      　　url:'/allin/policy/getProductInfo',
      　　...
  　　})

　　　　那么真正發送的請求是：/api/allin/policy/getProductInfo

 devServer: {
     proxy: { //匹配規則 '/api': {
             //要訪問的跨域的域名
             target: 'http://www.test.com',
             ws: true,
             secure:false, // 使用的是http協議則設置為false，https協議則設置為true
             changOrigin: true, //開啟代理
             pathRewrite: {
                 '^/api': ''
             }
         }
     }
 }

相當於請求遇見 /api 才做代理，但真實的請求中沒有/api，所以在pathRewrite中把 /api 去掉, 這樣既有了標識, 又能在請求接口中把 /api 去掉。

注意：
　　pathRewrite：如果不寫則只能修改代理的域名，如果寫則可以修改代理的域名和后邊的路徑。

 

　　4. 使用

　　　　 1).  在項目的根目錄下新建 faceConfig.js 文件　　

// 前端所有配置放這里
const faceConfig = () => {
    return {
        // 測試環境地址
         'devServer': '/api',
        //正式環境地址
        // 'devServer': window.location.origin+'/contentPath', // '/contentPath'為上下文路徑，沒有可不寫
    }
}
module.exports = faceConfig()

　　　　2).  在src下新建文件夾api，在api下新建index.js文件　　　

const API_ROOT = require('../../faceConfig.js').devServer
export default {
    info: `${API_ROOT}/users/info`,
}

　　　　3).  組件中

　　　　

<template>
    ···
</template>
<script>
    import API from '../../api/index.js' //路徑根據自身情況修改

    ···
    getInfo(){
        let _this = this;
        _this.$get(API.info).then((res) => {
              ···      
        })
    }   
    ···
</script>   

 

 

解決線上環境跨域問題

1. 前端先按 上述代理方式 做統一代理
2. 后端 nginx 反向代理配置

　　　　1). nginx 的 配置文件 xx.conf 的 server {} 里加如下：

location /api/ {
        // 把 /api 路徑下的請求轉發給真正的后端服務器
        proxy_pass http://xx.xx.xx.xx:5568;

        // 把host頭傳過去，后端服務程序將收到your.domain.name, 否則收到的是localhost:8080
        proxy_set_header Host $http_host;

        // 把cookie中的path部分從/api替換成/service
        proxy_cookie_path /api /;

        // 把cookie的path部分從localhost:8080替換成your.domain.name
        proxy_cookie_domain localhost:80 http://xx.xx.xx.xx:5568;
    }

　　　　2). 重新啟動一下 nginx 即可

/etc/init.d/nginx reload