Nginx代理Axios请求报404

小感触 2020年02月22日 224次浏览

今天在部署毕设的时候,发现通过Nginx始终无法将来自前端的Axios请求正确代理到后端地址上面,具体的场景是这样的:

前端Axios发起的请求都是以mss-api开头的,想要在Nginx中,将所有这样开头的Url去除mss-api字符,将之后的所有字符作为新的Url添加到后端地址上发起请求,但是通过配置发现请求虽然是被代理到后端,但Url却并不满足要求,后端报404错误。

问题主要是因为小的疏忽,在斜杠这个问题上栽了跟头。

2.关于代理proxy_pass的斜杠问题

主要分为两个大的方面:

2.1不包含URL的代理地址:

Nginx将会把我们配置的Location块的内容进行追加到代理地址后面。

location /api/ {
   proxy_pass http://bestbigkk.com;
}

2.2包含了URL的代理地址:

Nginx将会把Location块匹配的路径覆盖

location /api/ {
  proxy_pass http://bestbigkk.com/
}

而文章开头的问题出现时候,Nginx配置是这样的:

upstream mss-api{
  server xx.xx.xx.xx:45484
}
location /mss-api/ {
  proxy_pass http://mss-api
}

来自前端的请求:/mss-api/sys/config在到达Nginx这的时候,因为我之前配置的代理地址是不具有URL形式的形式,所以代理后的请求直接是:http://xx.xx.xx.xx:45484/mss-api/sys/config, 因为mss-api只是这里一个请求前缀,便于让Nginx区分而设置的,正确的地址应该是:http://xx.xx.xx.xx:45484/sys/config 。因此造成了404的错误。问题知道了,解决时候也是非常简单,只需将代理地址弄成具有URL的形式即可:

upstream mss-api{
  server xx.xx.xx.xx:45484
}
location /mss-api/ {
  proxy_pass http://mss-api/
}

总之还是一个细节问题自己没有理解到位,借助这次部署的机会发现了自己的疏忽点,记录一下。下面也是一些参考:

  location /api1/ {
    proxy_pass http://localhost:8080;
  }
  # http://localhost/api1/xxx -> http://localhost:8080/api1/xxx


  location /api2/ {
    proxy_pass http://localhost:8080/;
  }
  # http://localhost/api2/xxx -> http://localhost:8080/xxx


  location /api3 {
    proxy_pass http://localhost:8080;
  }
  # http://localhost/api3/xxx -> http://localhost:8080/api3/xxx


  location /api4 {
    proxy_pass http://localhost:8080/;
  }
  # http://localhost/api4/xxx -> http://localhost:8080//xxx,请注意这里的双斜线,好好分析一下。


  location /api5/ {
    proxy_pass http://localhost:8080/haha;
  }
  # http://localhost/api5/xxx -> http://localhost:8080/hahaxxx,请注意这里的haha和xxx之间没有斜杠,分析一下原因。

  location /api6/ {
    proxy_pass http://localhost:8080/haha/;
  }
  # http://localhost/api6/xxx -> http://localhost:8080/haha/xxx

  location /api7 {
    proxy_pass http://localhost:8080/haha;
  }
  # http://localhost/api7/xxx -> http://localhost:8080/haha/xxx

  location /api8 {
    proxy_pass http://localhost:8080/haha/;
  }
  # http://localhost/api8/xxx -> http://localhost:8080/haha//xxx,请注意这里的双斜杠。