首页 前端知识 nginx: 405 not allowed&&vue代理地址在nginx反向代理到正式环境不生效

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

2025-03-19 11:03:42 前端知识 前端哥 653 755 我要收藏

报错: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_addressbackend2_addressfrontend_server_address为实际的后端服务地址。同时,根据实际的需求调整proxy_set_header指令中的配置。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/24103.html
标签
评论
发布的文章

动态规划感悟1

2025-03-20 12:03:52

华为NAS真实测评!

2025-03-20 12:03:52

Java设计模式之代理模式

2025-03-20 12:03:51

Linux 锁、线程同步

2025-03-20 12:03:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!