Flutter Web中Dio发送PUT/POST请求返回404但端点存在

针对你遇到的Flutter Web中PUT/POST请求返回404、但GET和Postman测试正常的问题，从以下几个方向排查：

1. 检查Caddy反向代理配置 #

大概率是Caddy没有正确处理PUT/POST请求，或者拦截了浏览器的预请求（OPTIONS）：

• 确保Caddyfile中没有限制请求方法，不要添加仅允许GET的规则：

  api.yourdomain.com {
      reverse_proxy localhost:8080
  }
  

• 处理OPTIONS预请求：浏览器发送POST/PUT前会先发起OPTIONS请求验证权限，如果Caddy返回404，后续请求会直接失败。添加规则处理OPTIONS：

  api.yourdomain.com {
      @options method OPTIONS
      respond @options 204  # 返回204无内容即可通过预验证
      reverse_proxy localhost:8080
  }
  

• 若启用了CORS相关配置，确保允许你的网站域名跨域请求：

  api.yourdomain.com {
      cors https://your-web-domain.com
      reverse_proxy localhost:8080
  }
  

2. 验证Dio请求的路径与格式 #

• 核对PUT/POST请求的路径是否和Go API注册的完全一致，注意是否多/少了斜杠，或者参数位置错误：

  // 比如Go注册的是PUT /api/user/:id，确保Dio请求路径匹配
  await dio.put('/api/user/123', data: {...});
  

• 确认请求头的Content-Type是否匹配Go API的期望，比如API要求接收JSON，则显式设置：

  var response = await dio.post(
    '/api/endpoint',
    data: {"name": "test"},
    options: Options(headers: {'Content-Type': 'application/json'}),
  );
  

3. 检查Go API的路由注册 #

虽然Postman测试正常，但仍需确认：

• PUT/POST端点的路由是否正确注册，比如用Gin框架时，不要把POST写成GET：

  // 正确示例
  r.POST("/api/endpoint", createHandler)
  r.PUT("/api/endpoint/:id", updateHandler)
  

• 检查是否有路由前缀或中间件拦截了请求，比如某些权限中间件仅允许特定方法访问特定路径。

4. 清除浏览器缓存 #

浏览器可能缓存了旧的路由或CORS规则，尝试清除缓存后重新测试，或者使用隐私窗口发起请求。

内容的提问来源于stack exchange，提问作者Nilo Paim