html实现CORS预检请求处理_html CORS preflight OPTIONS预检处理【面试必备】-html教程-PHP中文网

前端无法直接实现cors预检处理，必须由后端正确响应options请求；content-type非简单值会触发预检，后端需返回access-control-allow-headers；spring boot 2.4+需配置corsconfigurationsource；nginx需条件判断origin并显式return 204。

html实现cors预检请求处理_html cors preflight options预检处理【面试必备】

前端无法直接“实现”CORS预检请求的处理——OPTIONS 预检是浏览器自动发起、必须由后端响应的环节，HTML 本身不参与逻辑处理。所有所谓“HTML 实现”，本质是前端触发了预检，而真正要解决的是后端如何正确响应它。

为什么在 HTML 或 fetch 中改个 `Content-Type` 就挂了

因为 Content-Type: application/json 不属于简单请求的三类合法值（text/plain / application/x-www-form-urlencoded / multipart/form-data），浏览器立刻判定为非简单请求，强制先发 OPTIONS。如果你的后端没监听或没返回 Access-Control-Allow-Headers: Content-Type，预检就失败，主请求压根不会发出——你在 Network 面板里只看到一个红字 OPTIONS 404 或 500，fetch 报错却是 No 'Access-Control-Allow-Origin' header，其实后端连主请求的影子都没见到。

常见触发点包括：

fetch('/api/user', { method: 'POST', headers: { 'Content-Type': 'application/json' } })
axios.post('/login', { token: 'xxx' })（默认带 application/json）
任何带自定义 header 的请求，比如 'X-Auth-Token': 'abc'

Spring Boot 2.4+ 的 `@CrossOrigin` 为什么突然不生效

新版本默认把 OPTIONS 路径从 CORS 过滤链中剥离了，@CrossOrigin 只作用于实际接口路径（如 /api/delete），但预检请求打到的是同路径的 OPTIONS /api/delete，若没显式配置，就会 405 Method Not Allowed。

必须用配置类替代注解：

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
    config.setAllowCredentials(true);
    config.addAllowedMethod("DELETE");
    config.addAllowedMethod("PUT");
    config.addExposedHeader("X-Total-Count");
    config.setMaxAge(3600L);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return source;
}

另外两个关键点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

如果用了 SpringSecurity，必须在 SecurityConfig 里调用 http.cors()，否则安全过滤器会提前拦截 OPTIONS
allowedOrigins 不能写 "*" + allowCredentials(true)，否则启动报错

Nginx 层加 CORS 头时，`OPTIONS` 响应容易漏掉 `Origin` 判断

Nginx 不像应用层能自然读取请求头，它对 Origin 的判断是字符串匹配，且预检请求可能不带 Origin（极少见但存在），直接无条件加头会导致缓存污染或安全风险。

正确写法必须加条件判断：

location /api/ {
    if ($http_origin ~* ^(https?://localhost:3000|https://myapp.com)$) {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, X-Auth-Token';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Vary' 'Origin';
    }
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 3600;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, X-Auth-Token';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        return 204;
    }
}

注意：add_header 在 if 块内才生效；return 204 必须明确，不能只靠 add_header；Vary: Origin 是为了防止 CDN 或代理缓存错误的跨域响应。