vue開發中的跨域問題解決，以及nginx上線部署（多個服務接口）解決方案

前端開發的的時候，使用vue cli3的devServer來解決跨域問題,上線部署則是用的nginx反向代理至后台服務所開的端口

 

在vue cli3中的配置
在package.json同級目錄下新建vue.config.js文件

devServer: {
    host: 'localhost',//target host
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy:{
      
      '/login_api':{
        target: 'http://login.163.com',//代理地址，這里設置的地址會代替axios中設置的baseURL
        changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
        //ws: true, // proxy websockets
        //pathRewrite方法重寫url
        pathRewrite: {
            '^/login_api': '' 
            //pathRewrite: {'^/api': '/'} 重寫之后url為 http://192.168.1.16:8085/xxxx
            //pathRewrite: {'^/api': '/api'} 重寫之后url為 http://192.168.1.16:8085/api/xxxx
       }
      },
      '/logistics_api':{
          target: 'http://logistics.163.com',//代理地址，這里設置的地址會代替axios中設置的baseURL
          changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
          //ws: true, // proxy websockets
          //pathRewrite方法重寫url
          pathRewrite: {
              '^/logistics_api': '' 
              //pathRewrite: {'^/api': '/'} 重寫之后url為 http://192.168.1.16:8085/xxxx
              //pathRewrite: {'^/api': '/api'} 重寫之后url為 http://192.168.1.16:8085/api/xxxx
         }
      }
    }
    //before: require('./mock/mock-server.js')
  }

vue cli WebpackDevServer 解決跨域的方法是通過node開一個服務器進行代理。
前台發向后台服務器的請求，先發向node所開的服務，node服務器以相同的參數向真正的服務器進行請求，再把響應返回給前台

如果打開瀏覽器調試工具的network會發現請求依然發向 localhost:8080而不是后台服務的http://login.163.com
但是沒關系的，node已經幫你向8081端口請求了數據~

注意：pathRewrite的路徑重寫配置（如果你請求的服務接口中不存在logistics_api，則需要替換為空，或者根據實際情況進行替換）

比如

真實的服務接口地址為：http://login.163.com/api/v1/client

前端VUE項目中axios請求的路徑為：/login_api/api/v1/client

則應該將axios請求中的'login_api'替換為空，以下：

pathRewrite: {
              '^/login_api': '' 
              //pathRewrite: {'^/api': '/'} 重寫之后url為 http://192.168.1.16:8085/xxxx
              //pathRewrite: {'^/api': '/api'} 重寫之后url為 http://192.168.1.16:8085/api/xxxx
         }

這樣你的請求地址才是：http://login.163.com/api/v1/client

生產環境中使用nginx的反向代理進行部署

在寶塔面板中增加一條反向代理記錄

 

 

 

以此類推可以配置多個服務接口。

 

參考：前端vue開發中的跨域問題解決，以及nginx上線部署。（vue devServer與nginx） - 帥氣的日王 - 博客園 (cnblogs.com)