nginx: 405 not allowed&&vue代理地址在nginx反向代理到正式环境不生效

报错：405 not allowed

原因：vue代理地址在nginx反向代理到正式环境不生效

很多更改配置的方法都不生效，同时引发新问题，比如返回html而非json响应。

这是开发环境配置的vue.config.js是这样：

      "/map": {
        target: "http://xxx", // 将请求代理到后端的地址
        changeOrigin: true,
        pathRewrite: {
          "^/map": "", // 重写路径，后端接受到的将不带/map
        },
      },
      "/wms": {
        target: "http://xxx", // 将请求代理到后端的地址
	      changeOrigin: true,
        pathRewrite: {
          "^/wms": "", // 重写路径，后端接受到的将不带/map
        },
      },
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },复制

解决方法

在Nginx中配置Vue应用的反向代理，以便将对Vue应用的请求转发到不同的后端服务地址，可以在Nginx配置文件中使用location指令和proxy_pass指令来实现。以下是一个配置示例：

nginx.conf

http {
    server {
        listen 80;
 
        location /api1/ {
            proxy_pass http://backend1_address/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
 
        location /api2/ {
            proxy_pass http://backend2_address/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
 
        location / {
            proxy_pass http://frontend_server_address;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}复制

在这个配置中，当请求以/api1/开头时，它们被转发到http://backend1_address/，以/api2/开头的请求被转发到http://backend2_address/，其他请求被转发到http://frontend_server_address。

确保替换backend1_address、backend2_address和frontend_server_address为实际的后端服务地址。同时，根据实际的需求调整proxy_set_header指令中的配置。