Golang+Svelte应用：服务器报404但Chrome显示405方法不允许

我用原生Golang（非Gin框架）和SvelteJS开发Web应用，核心需求是登录外部券商网站，获取会话Cookie和JWT以调用后续API。当前遇到矛盾问题：

• 点击登录按钮后，Golang服务器控制台返回[2023-04-07T06:23:17.916Z] "POST /api/broker-login" Error (404): "Not found"
• 但Chrome网络面板显示该请求返回405 Method Not Allowed

已确认信息：

• 前端发送的是POST请求到/api/broker-login端点
• 自认为文件路径与Handler配置正确
• 前后端均运行在8081端口，访问localhost:8081触发问题
• brokerLoginHandler中的fmt.Println未执行，说明Handler完全没被触发
• 之前用Python requests实现相同逻辑无异常，怀疑CORS但不确定

核心代码片段 #

main.go（Golang后端） #

package main

import (
    "bytes"
    "encoding/json"
    "fmt"
    "html/template"
    "io/ioutil"
    "log"
    "net/http"
    "os"
    "strings"
    "time"

    "github.com/joho/godotenv"
)

// 其余代码保持原样

main.js（前端工具函数） #

// Add event listener to the "Login to Broker" button
export async function loginToBroker() {
    try {
        const response = await fetch("/api/broker-login", { method: "POST" });
        console.log(response) // trying to test...

        if (response.ok) {
            // Change the session status text to green
            const statusText = document.querySelector("#broker-status");
            statusText.textContent = "Connected to broker";
            statusText.classList.remove("disconnected");
            statusText.classList.add("connected");
        } else {
            console.error("Failed to log in to broker:", await response.text());
        }
    } catch (error) {
        console.error("Error logging in to broker:", error);
    }
}

App.svelte（前端主组件） #

<script>
    import OrderForm from "./components/OrderForm.svelte";
</script>

<main>
    <h1>Stock App</h1>
    <SessionStatus />
</main>

排查思路与解决方法 #

1. 确认Golang路由注册逻辑 #

服务器返回404说明路由未匹配，浏览器的405可能是中间件/默认Handler的干扰。重点检查：

• 是否正确注册POST方法的路由：确保用http.HandleFunc("/api/broker-login", brokerLoginHandler)，而非仅支持GET的配置
• 路由注册顺序：Golang路由是前缀匹配，如果静态文件路由（比如http.FileServer）放在API路由之前，会优先匹配/api/broker-login（视为静态资源路径），导致返回404，需把API路由放在静态路由前面

2. 验证请求真实情况 #

在main.go添加全局日志中间件，打印所有请求的方法和路径，确认请求是否真的以POST方法到达目标端点：

func loggingMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        log.Printf("Received %s request for %s", r.Method, r.URL.Path)
        next.ServeHTTP(w, r)
    })
}

// 先注册API路由，再注册静态路由并包裹中间件
http.HandleFunc("/api/broker-login", brokerLoginHandler)
http.Handle("/", loggingMiddleware(http.FileServer(http.Dir("./public"))))

3. 处理OPTIONS预请求 #

浏览器会对跨域（或部分同域）POST请求发送OPTIONS预请求，若后端未处理，会返回405。在brokerLoginHandler中添加预请求处理：

func brokerLoginHandler(w http.ResponseWriter, r *http.Request) {
    // 添加CORS头（同域也可加，避免预请求报错）
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

    // 处理OPTIONS预请求
    if r.Method == http.MethodOptions {
        w.WriteHeader(http.StatusOK)
        return
    }

    // 原有业务逻辑
    fmt.Println("Handler triggered")
    // ...
}

4. 检查路由路径一致性 #

Golang路由匹配严格区分末尾斜杠：如果注册的路由是/api/broker-login/（带斜杠），而前端请求的是/api/broker-login（不带斜杠），会触发301重定向，重定向后的请求为GET方法，导致后端返回404，浏览器则显示405。确保路由注册路径与前端请求路径完全一致。

5. 确认前端函数调用逻辑 #

检查SessionStatus.svelte中是否正确绑定登录按钮的点击事件，确保loginToBroker函数被触发：

<!-- SessionStatus.svelte示例 -->
<script>
    import { loginToBroker } from '../main.js';
</script>

<button on:click={loginToBroker}>Login to Broker</button>
<p id="broker-status" class="disconnected">Disconnected from broker</p>

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