Angular Spring Boot：重定向错误：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Content-Type

Posted 2023-03-04

【中文标题】Angular Spring Boot：重定向错误：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Content-Type

【英文标题】：Angular Spring Boot: Redirection error: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：2019-01-07 16:27:17

【问题描述】：

我在前端使用 Angular 6，在后端使用 Java Spring Boot。

我希望我的登录页面向服务器发出请求。服务器重定向到仪表板页面。

我有 http://localhost:4200/login 角度页面，它向服务器 http://localhost:8080/login 发出 POST 请求

.ts 文件包含：

onLoginClickPost() 
  console.log('redirect request clicked');
  this.data.getUserInfoPost().subscribe(
    data => 
      console.log(data);
      this.userInfo = data;
    
  );


getUserInfoPost() 
    return this.http.post('http://localhost:8080/login', nextUrl: 'http://localhost:4200/dashboard');

服务器有@RestController，其方法映射到传入的POST请求，应该重定向到http://localhost:4200/dashboard：

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "/login", method = RequestMethod.POST)
public ResponseEntity<?> login_post(@RequestBody LoginReqPostParam payload) 

    HttpHeaders headers = new HttpHeaders();

    try 
        headers.setLocation(new URI(payload.getNextUrl()));
        headers.add("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
     catch (URISyntaxException e) 
        logger.error("URI Exception: ", e);
        e.printStackTrace();
    

    return new ResponseEntity<>(headers, HttpStatus.FOUND);

LoginReqPostParam 是一个简单的类，将传入的 JSON 有效负载作为对象。

登录 Angular 页面能够向服务器发出 POST 请求。现在在服务器上，从服务器返回 ResponseEntity 后，我在浏览器控制台中收到以下错误：

无法加载http://localhost:4200/dashboard：请求头字段 Access-Control-Allow-Headers 中不允许 Content-Type 预检响应。

如何重定向到http://localhost:4200/dashboard 页面？我需要在 Angular 仪表板组件文件中添加一些内容吗？

【问题讨论】：

响应的 HTTP 状态码是什么？

@sideshowbarker 请求 URL：localhost:4200/dashboard 请求方法：OPTIONS 状态码：200 OK 远程地址：127.0.0.1:4200 推荐人策略：no-referrer-when-downgrade

【参考方案1】：

您正在使用 @CrossOrigin 进行 POST 请求，但 Angular（正在开发中）正在使用 OPTIONS 发送 预检请求。

我建议您使用允许所有来源的开发配置文件（您必须在 Bean 中为这些配置文件创建自定义过滤器）

【参考方案2】：

使用 Allow-Control-Allow-Origin: * 谷歌浏览器的扩展。 并启用跨域资源共享 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

【讨论】：

我正在使用该扩展程序，但仍然收到错误