Vue2.0 配置反向代理

Vue2.0 配置反向代理

1. 找到config/index.js文件
2. 找到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" 
           }
         }
       },

    

3. 修改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

    

4. 重新运行：npm run dev，运行成功。

5. 注意：改配置只能本地运行时生效，打包发布以后还不能使用反向代理，VUE配置反向代理需要配置NGINX。

6. 配置Nginx反向代理

7. 安装Nginx：Nginx Windows 发布安装

8. Vue Nginx 发布：Vue Nginx 发布

9. 配置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;
           }
       }

    

10. 配置完成！