nginx 反向代理 介面請求

專案在開發的時候 使用本地環境 node ，但是線上走的是 nginx 伺服器 使用 vue-cli 3.0+

在根目錄下的 vue.config.js

function target(){
    return process.env.VUE_APP_API_URL;
}

module.exports = {
    devServer: {
        proxy:{
            '/api':{
                target: target(),
                changeOrigin: true,
                ws: true,
            }
        }
    }
}

nginx

目錄 /usr/local/nginx/conf/vhost 下面找到你配置檔案

新增你介面地址

location /api {                                                                                                                                                      
    add_header 'Access-Control-Allow-Origin' '*';                                                                                                                      
    proxy_pass https://api.*****.com;
  }

這樣配置 即可 訪問你的api介面

建議先看我寫的 vue-cli 3.0 + 封裝 axios

本作品採用《CC 協議》，轉載必須註明作者和本文連結