Angular4服务报错：预检请求返回无效HTTP状态码403

安全阿岳

2026-5-29

解决Response for preflight has invalid HTTP status code 403跨域问题

嘿，我来帮你拆解下这个问题～

首先得纠正一个关键误区：你在前端请求里加的Access-Control-Allow-Origin头完全没用，这个是后端服务器需要返回给浏览器的响应头，前端手动添加不会被浏览器认可，反而可能干扰正常的CORS校验。

为什么会出现403错误？

你的前端跑在4300端口，后端在8080端口，属于跨域请求。因为你设置了Content-Type: application/json，浏览器会先发送一次OPTIONS预请求（也就是preflight）去验证后端是否允许跨域。如果后端没有正确配置CORS规则，或者拒绝了OPTIONS请求，就会返回403错误，浏览器也就会阻止后续的GET请求。

另外Chrome跨域插件有时候不靠谱：要么是插件没正确生效（比如浏览器重启后失效），要么是它只支持简单请求（你的请求因为自定义Content-Type已经不属于简单请求范畴）。

具体解决方案

1. 修正前端代码，删掉多余的头

首先把请求里的Access-Control-Allow-Origin头去掉，同时GET请求其实不需要设置Content-Type: application/json（除非后端明确要求），可以简化代码：

getGroupsResponse(): Observable<IMainPageGroupResponseModel> { 
  this.dataUrl='http://localhost:8080/myApp/v1/Lookup/groups/list/19763'; 
  // GET请求不需要Content-Type头，直接用默认配置即可
  return this.http.get(this.dataUrl) 
    .map((response:Response) => <IMainPageGroupResponseModel>response.json()) 
    .catch(this.handleError); 
}

2. 后端配置CORS规则（核心解决办法）

跨域问题的本质必须由后端来解决，这里给你两种常见后端框架的配置示例：

如果是Spring Boot后端：
可以全局配置CORS，允许前端4300端口的请求，同时放行OPTIONS预请求：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/myApp/v1/**") // 精确匹配你的接口路径
                .allowedOrigins("http://localhost:4300") // 指定前端地址，比*更安全
                .allowedMethods("GET", "OPTIONS") // 允许GET和OPTIONS请求
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

也可以在对应的Controller方法上直接加@CrossOrigin(origins = "http://localhost:4300")注解。

如果是Node.js/Express后端：
使用cors中间件快速配置：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:4300',
  methods: ['GET', 'OPTIONS']
}));

3. 验证预请求是否正常

配置完后端后，你可以在浏览器开发者工具的Network面板里，查看OPTIONS请求的响应状态：如果返回200，并且响应头里包含Access-Control-Allow-Origin: http://localhost:4300，就说明CORS配置生效了，后续的GET请求就能正常执行。

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