POST请求出现无消息405错误且URL重复追加路径问题排查

使用Nginx作为Web服务器部署应用，前端与Express后端间配置反向代理，点击Stripe支付按钮提交时出现无错误消息的405错误。通过开发者工具发现请求URL路径被重复追加，预期请求地址为https://goldcoastcookiecompany.com/create-payment-intent，实际路径异常重复。

前端Axios配置 #

const apiClient = axios.create({
  baseURL: "goldcoastcookiecompany.com", // http://localhost:5000
  withCredentials: true,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    "Referrer-Policy": "no-referrer-when-downgrade",
    "Access-Control-Allow-Origin": "goldcoastcookiecompany.com", // http://localhost:8080
    "Access-Control-Allow-Methods": "GET, POST, DELETE, OPTIONS"
 }
});

后端Express配置 #

CORS中间件配置 #

app.use(cors({ credentials: true, origin: 'goldcoastcookiecompany.com' })) // http://localhost:8080 in dev

路由配置 #

router
  .route('/create-payment-intent')
  .post(express.json(), OrdersController.apiCreatePaymentIntent)

Nginx配置 #

Web服务器配置 #

#### HTTP - redirect all traffic to HTTPS
server {
  listen 80;
  listen [::]:80 default_server ipv6only=on;
  return 301 https://$host$request_uri;
}

#### HTTPS - proxy all requests to Node app 
server {
  #ENABLE HTTP/2 
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name goldcoastcookiecompany.com;

#### USE LETSENCRYPT CERTIFICATES
  ssl_certificate ....
  ssl_certificate_key ....

#### INCLUDE THE SSL CONFIGURATION FROM CIPHERLI.ST
   include snippets/ssl-params.conf;

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Host $host;
    proxy_pass http://localhost:8080;
    proxy_ssl_session_reuse off;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }
}

反向代理配置 #

server {
  location / {
  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-Forwared-Proto $scheme;
  proxy_pass http://localhost:5000;
}
}

问题原因分析 #

1. Nginx配置冲突：存在两个独立的server块，其中反向代理的server块未指定监听端口和server_name，会与443端口的Web服务器server块产生路由冲突，导致请求被错误转发，引发路径重复。
2. Axios baseURL缺失协议：baseURL未添加https://前缀，Axios会将其识别为相对路径，拼接时重复追加当前页面路径，最终导致请求URL异常。
3. 405错误根源：路径错误导致请求到达后端不存在的路由，或该路由不支持POST方法，后端未返回错误详情，因此前端无错误消息。

解决方案 #

1. 修复Nginx配置，合并路由规则 #

删除独立的反向代理server块，在443端口的server块中添加API路径的代理规则，区分前端静态资源与后端API请求：

#### HTTPS - proxy requests to frontend and backend
server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name goldcoastcookiecompany.com;

  ssl_certificate ....
  ssl_certificate_key ....
  include snippets/ssl-params.conf;

  # 代理前端静态资源到8080
  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Host $host;
    proxy_pass http://localhost:8080;
    proxy_ssl_session_reuse off;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

  # 代理API请求到5000
  location /create-payment-intent {
    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; # 修复拼写错误
    proxy_pass http://localhost:5000;
  }
}

注意：修复了X-Forwared-Proto的拼写错误，正确应为X-Forwarded-Proto。

2. 修正Axios baseURL #

为baseURL添加https://前缀，确保Axios识别为绝对路径：

const apiClient = axios.create({
  baseURL: "https://goldcoastcookiecompany.com",
  withCredentials: true,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    "Referrer-Policy": "no-referrer-when-downgrade"
    // 移除前端设置的CORS响应头，该头应由后端返回，前端设置无效
  }
});

前端无需设置Access-Control-Allow-Origin和Access-Control-Allow-Methods，这些是后端响应头，前端设置不生效。

3. 验证Express路由挂载 #

确保路由正确挂载到Express应用，例如：

// 假设router是单独定义的路由文件
app.use('/', router);
// 如果路由有前缀，需对应Axios的请求路径，比如：
// app.use('/api', router);
// 此时Axios的baseURL应改为"https://goldcoastcookiecompany.com/api"

4. 排查405错误 #

完成上述配置后，若仍出现405错误，需：

• 检查Express路由是否正确注册，确保/create-payment-intent路由支持POST方法。
• 通过Nginx日志或Express日志查看请求的实际路径和方法，确认请求是否正确到达后端。

内容的提问来源于stack exchange，提问作者Kevin T.