Vue2.0 配置反向代理

最新推荐文章于 2024-10-07 23:10:13 发布

leftstrange

最新推荐文章于 2024-10-07 23:10:13 发布

阅读量1.7k

点赞数 1

分类专栏： Vue 基础学习文章标签： vue nginx

本文链接：https://blog.csdn.net/leftstrang/article/details/113883434

版权

Vue 基础学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue2.0 配置反向代理

找到config/index.js文件

找到dev下面的 proxyTable:{}写入代码：

 proxyTable: {
      //定义/controller/*,注：controller叫什么都可以，但是下面要统一，'*'号必须要加
      "/controller/*": {
        //将http://127.0.0.1:8088/印射为/controller
        target: "http://127.0.0.1:8090/", //跨域地址后台服务器地址
        changeOrigin: true, //是否跨域
        // secure: false, //是否使用https
        pathRewrite: {
           //匹配以/api为开头的请求地址，并使用/controller替换替换成‘/XXX’，
          "^/api": "/XXX" 
        }
      }
    },

修改request请求文件

var service = axios.create({
//   baseURL: process.env.BASE_API,//本地调试
  baseURL: "/controller/", // api的base_url
  timeout: 30000, // request timeout,
  method: "post"
});

‘/controller/‘运行以后'/controller/'会被替换成http://127.0.0.1:8090/

举例：

this.$axios.get('/api/Login').then((res)=>{
    console.log(res)
})

说明：https://localhost:8090/api/Login  
会被替换成 https://127.0.0.1:8090/XXX/Login
如果："^/api": "/XXX" 配置成："^/api": "" 
会被替换成 https://127.0.0.1:8090/Login

重新运行：npm run dev，运行成功。
注意：改配置只能本地运行时生效，打包发布以后还不能使用反向代理，VUE配置反向代理需要配置NGINX。
配置Nginx反向代理
安装Nginx：Nginx Windows 发布安装
Vue Nginx 发布：Vue Nginx 发布

配置Nginx文件：打开nginx.conf文件

server {
        listen       8089;
        server_name  localhost;

 	    location / {
            root   D://nginx-1.18.0/html/dist;
            index  index.html index.htm;
        }

        //配置反向代理'/controller/'和request文件中的链接配置成一致
        location /controller/ {
	        proxy_set_header Host $host;
            proxy_set_header x-forwarded-for $remote_addr;
            proxy_set_header X-Real-IP $remote_addr;
            //配置反向代理IP地址和request文件中的链接配置成一致
            proxy_pass http://127.0.01:8090/;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }