React调用Golang Gin后端遭遇CORS跨域拦截问题求助

可能的原因及修复步骤 #

1. 调整Gin的CORS配置，精确匹配Origin并完善选项 #

虽然你已使用gin-contrib/cors中间件，但配置细节可能导致CORS头未正确返回。修改配置如下：

package main

import (
    "net/http"
    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()

    // 自定义CORS配置
    config := cors.Config{
        AllowOrigins:     []string{"https://webpage.com"}, // 精确指定前端域名，避免使用通配符*
        AllowMethods:     []string{"GET", "POST", "OPTIONS", "PUT", "DELETE"},
        AllowHeaders:     []string{"Origin", "Content-Type", "Accept"},
        AllowCredentials: true, // 启用凭证支持，规避部分浏览器兼容性问题
        ExposeHeaders:    []string{"Content-Length"},
        MaxAge:           43200,
    }

    // 确保CORS中间件是第一个加载的，优先级高于路由定义
    router.Use(cors.New(config))

    api := router.Group("/")
    {
        api.POST("Posttobackend", posttobackend)
    }

    router.Run(":8080")
}

2. 验证OPTIONS请求的响应头 #

用curl手动发送预请求，确认CORS头是否正确返回：

curl -X OPTIONS https://abcde.eu.ngrok.io/Posttobackend -H "Origin: https://webpage.com" -v

检查输出中是否包含Access-Control-Allow-Origin: https://webpage.com，如果没有，说明CORS中间件未正确生效，需确认中间件加载顺序是否在所有路由之前。

3. 清除浏览器缓存或禁用缓存测试 #

浏览器可能缓存了之前的错误响应，导致新配置无法生效：

• 打开开发者工具（F12），在「网络」标签勾选「禁用缓存」
• 强制刷新页面（Ctrl+Shift+R）或清除浏览器缓存

4. 修正fetch请求细节 #

你的fetch代码基本正确，可优化如下：

const Posttobackend = async (values) => {
    try {
        const response = await fetch(`${API_URL}/Posttobackend`, { // 确保路径拼接正确
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(values),
        });
        if (response.ok) {
            const data = await response.json();
            return data;
        } else {
            const errorData = await response.json();
            throw new Error(`Error: ${errorData.message || '处理请求时出错，请重试。'}`);
        }
    } catch (error) {
        console.error("Error: ", error);
        throw error;
    }
}; 

移除mode: 'cors'（这是默认值，无需显式设置），同时确认API_URL未包含多余路径。

5. 确认ngrok转发配置 #

确保ngrok正确转发到本地Gin服务器的8080端口，执行命令：

ngrok http 8080

避免使用额外路径转发规则，防止路由匹配异常。

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