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

HOPENESS73180

于 2024-11-08 10:06:18 发布

阅读量999

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js nginx javascript

本文链接：https://blog.csdn.net/qq_70300126/article/details/143614556

vue 专栏收录该内容

1 篇文章

订阅专栏

报错：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指令中的配置。