React表单注册遭CORS拦截问题求助（附前后端代码）

问题根源 #

你的前端运行在http://localhost:3000，但后端Spring Cloud Gateway的CORS配置仅允许http://127.0.0.1:3000作为源地址——浏览器会将localhost和127.0.0.1视为两个不同的源，导致预检请求因缺少匹配的Access-Control-Allow-Origin头被拦截。

具体解决步骤 #

1. 统一前后端源地址配置 #

修改后端Spring Cloud Gateway的CORS配置，将前端实际运行的源地址加入允许列表：

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins: 
              - "http://localhost:3000"
              - "http://127.0.0.1:3000"
            allowedHeaders: "*"
            allowedMethods:
            - GET
            - POST
            - PUT
            - DELETE
            - OPTIONS # 显式允许预检请求方法
            allowCredentials: true # 对应前端的credentials: "include"配置

2. 确认网关配置生效 #

• 检查Spring Cloud Gateway服务是否运行在8081端口，且你的注册请求确实经过网关路由。
• 如果后端接口未通过网关直接暴露，需在实际的Spring Boot业务服务中单独配置CORS，而非仅依赖网关配置。

3. 优化前端请求代码 #

当前fetch请求未携带表单数据，且事件绑定逻辑可优化：

export default function Inscrit() {
    function handleSubmit(e) {
        e.preventDefault();
        // 收集表单输入数据
        const formData = new FormData(e.target);
        const payload = {
            nom: formData.get('nom'),
            prenom: formData.get('prenom'),
            email: formData.get('email'),
            password: formData.get('password')
        };

        fetch('http://127.0.0.1:8081/api/auth/register', {
            method: 'POST',
            mode: 'cors',
            credentials: "include",
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify(payload) // 添加请求体，传递表单数据
        })
        .then(response => {
            if (!response.ok) throw new Error('注册请求失败');
            return response.json();
        })
        .then(data => console.log('注册成功:', data))
        .catch(error => console.error('注册失败:', error));
    }
    
    return(
        <div>
            <h1>Inscrit toi !</h1>
            <form onSubmit={handleSubmit}> {/* 将事件绑定到表单的onSubmit更符合逻辑 */}
                <input type="text" placeholder="Nom" name='nom'/>
                <input type="text" placeholder="Prenom" name='prenom'/>
                <input type="email" placeholder="Email" name='email'/>
                <input type="password" placeholder="Mot de passe" name='password'/>
                <button type="submit">s'inscrire</button>
            </form>
        </div>
    )
}

4. 验证预检请求 #

打开浏览器开发者工具（F12）→ Network标签，查看OPTIONS预检请求的响应头：

• 确认响应头包含Access-Control-Allow-Origin，且值与前端源地址匹配。
• 确认Access-Control-Allow-Credentials为true，对应前端的凭证配置。

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