React+SpringBoot应用调用外部.NET认证API遇CORS问题求解

1. 确认.NET服务器的CORS配置有效性 #

虽然对方声称设置了接受任意请求，但Basic Auth会触发预检请求（OPTIONS），需验证以下配置：

• 明确允许OPTIONS方法
• 允许携带Authorization请求头（Basic Auth依赖该头传递凭证）
• 注意：当请求携带凭证时，Access-Control-Allow-Origin不能设为*，必须指定前端应用的具体域名（如http://localhost:3000），否则浏览器会拒绝响应

2. 修正Axios请求配置 #

确保请求携带正确凭证并开启跨域凭证传递：

import axios from 'axios';

const username = '用户账号';
const password = '用户密码';
const authHeader = 'Basic ' + btoa(`${username}:${password}`);

axios.post('https://application1的登录API地址', {}, {
  headers: {
    'Authorization': authHeader,
    'Content-Type': 'application/json'
  },
  withCredentials: true // 跨域传递凭证必须开启该配置
})
.then(res => console.log(res.data))
.catch(err => console.error('登录失败:', err));

3. 用Spring Boot做请求代理（推荐方案） #

若.NET服务器的CORS配置无法调整，可让Spring Boot后端作为中间层转发请求：

• React前端调用自身Spring Boot的登录接口
• Spring Boot后端通过RestTemplate/WebClient调用.NET的登录API（后端间请求不受CORS限制）
  示例Spring Boot代码：

import org.springframework.http.*;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;

@RestController
public class LoginProxyController {

    @PostMapping("/proxy-login")
    public ResponseEntity<?> proxyLogin(@RequestHeader("Authorization") String authHeader) {
        RestTemplate restTemplate = new RestTemplate();
        String netLoginUrl = "https://application1的登录API地址";
        
        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", authHeader);
        
        HttpEntity<String> entity = new HttpEntity<>(headers);
        return restTemplate.exchange(netLoginUrl, HttpMethod.POST, entity, String.class);
    }
}

前端修改为调用自身后端接口：

axios.post('/proxy-login', {}, {
  headers: {
    'Authorization': authHeader
  }
})

4. 排查浏览器端干扰 #

• 用隐身模式测试，避免旧CORS响应缓存影响
• 禁用浏览器的CORS相关扩展（如CORS Unblock），防止扩展干扰正常请求判断

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