Netlify部署的React应用登录触发CORS错误，本地无此问题求解决

问题核心 #

GET请求、本地环境连接Heroku服务器均正常，但Netlify托管的客户端发起登录POST请求时触发CORS错误，主要原因集中在请求格式不匹配或服务器CORS预请求处理逻辑异常。

修复步骤 #

1. 修正客户端POST请求格式 #

当前代码使用encodeURI({...data})传递参数，会将对象转为URL编码字符串，导致请求Content-Type与服务器配置的allowedHeaders不匹配，触发CORS拦截。直接传递原始对象，axios会自动处理为JSON格式：

const LoginSubmit = (e) =>{
    const data = {
        email: email,
        password: password 
    }
    // 移除encodeURI，直接传递data对象
    const login = axios.post(`${url}/users/login`, data)
                    .then((res) => {
                        if(res.status === 200){
                            parseJwt(res.data)
                            setLoggedIn(true)
                            setLoading(false)
                            navigate('/profile')
                        }
                       else{
                            setLoginError("发生错误，请重试")
                            return
                        }
                    })
                    .catch((error) => {
                        console.log(error)
                        setLoginError("邮箱或密码错误，请重试或注册")
                    });
       
        return login
}

2. 调整服务器CORS配置 #

配置中的preflightContinue: true会让OPTIONS预请求跳过CORS中间件的完整处理，流转到后续中间件，导致响应头缺失Access-Control-Allow-Origin。将其改为false，确保CORS中间件处理完预请求：

app.use(cors({
  origin: ["https://boisterous-churros-56908e.netlify.app", "http://localhost:3000"],
  credentials: true,
  methods: "GET, POST, PUT, DELETE",
  preflightContinue: false, // 修改此处
  allowedHeaders: ['Content-Type', 'Authorization']
}))

3. 排查路由级别的CORS覆盖 #

确认登录路由（/api/users/login）没有单独设置CORS中间件。如果路由中单独使用了cors()无参数配置，会覆盖全局规则，引发credentials与通配符origin的冲突。

4. 验证Heroku环境的Origin配置 #

检查Heroku服务器上的origin列表是否与Netlify域名完全一致，避免拼写错误、多余字符导致的匹配失败。

验证方式 #

重新部署服务器和客户端后，在浏览器控制台查看：

• OPTIONS预请求的响应头是否包含Access-Control-Allow-Origin: https://boisterous-churros-56908e.netlify.app
• POST请求的Content-Type是否为application/json

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