32:["$","p","c16cb355-fb3f-4a8a-960e-bad49dd27a40",{"children":"凭据模式不是通过一个 Access-Control-Request-Credentials 请求头声明；浏览器根据原始请求的配置执行相应检查。预检不会因此先带上实际请求的登录 Cookie 或 Bearer Token。"}] 33:["$","p","5e2a8d14-6582-48f6-9cfa-b14bbaf92624",{"children":"方法检查有一个规范细节：GET、HEAD、POST 本身属于安全列表方法。若 POST 因 JSON 或自定义头触发预检，不能笼统断言 Access-Control-Allow-Methods 未列出 POST 就必然失败。工程配置通常仍明确列出实际支持的方法，但业务路由必须独立限制允许的方法。"}] 34:["$","p","db8ea1bd-4b12-4685-ad36-b0fc275561d7",{"children":["$","a",null,{"href":"https://fetch.spec.whatwg.org/#cors-preflight-fetch","target":"_blank","rel":"noopener noreferrer","onClick":"$undefined","children":"规范依据：WHATWG Fetch 的 CORS 预检流程"}]}] 35:["$","h3","1a83f469-8910-49e5-8a11-5097e71904f5",{"className":"article-block-heading","style":{"fontSize":18,"fontWeight":600},"children":"四、用完整报文看一次交互"}] 36:["$","p","04f2d16b-b604-4056-89bc-8f1ab0b4589c",{"children":"以下代码和报文为示意，省略了部分浏览器自动生成的头。假设预检缓存未命中，页面来源是 https://app.example.com。"}] 37:["$","div","a0fa16ee-46c0-4a12-9685-429a03f6d3a3",{"className":"article-rich-content article-code-block","dangerouslySetInnerHTML":{"__html":"

fetch(\"https://api.example.com/orders\", {\n  method: \"POST\",\n  headers: {\n    \"Content-Type\": \"application/json\",\n    \"Authorization\": \"Bearer <access-token>\"\n  },\n  body: JSON.stringify({ productId: 123, quantity: 1 })\n});

"}}] 38:["$","p","cade867f-fc65-4cfb-9086-d87e7b122fa9",{"children":"第一步：浏览器自动发送预检请求。"}] 39:["$","div","f7fdb401-b8ba-43ae-8677-c81e1c50e5a3",{"className":"article-rich-content article-code-block","dangerouslySetInnerHTML":{"__html":"

OPTIONS /orders HTTP/1.1\nHost: api.example.com\nOrigin: https://app.example.com\nAccess-Control-Request-Method: POST\nAccess-Control-Request-Headers: authorization,content-type

"}}] 3a:["$","p","4c335550-873f-45f2-848b-065a84a83125",{"children":"注意，authorization 和 content-type 在这里是请求头名称。预检没有提交订单 JSON，也没有把真实 Token 的值发给服务器验证。JSON 的媒体类型使 Content-Type 进入需要预检许可的请求头集合，但预检报文并不把 application/json 的值作为 JSON Schema 校验条件传过去。"}] 3b:["$","p","1b4a6b7a-8cda-42c5-b2d0-8029ea66d8d4",{"children":"第二步：服务器根据允许的来源、方法与请求头，返回预检响应。"}] 3c:["$","div","ea83c2af-fe1f-48c3-84f1-e5934fd2c5d3",{"className":"article-rich-content article-code-block","dangerouslySetInnerHTML":{"__html":"

HTTP/1.1 204 No Content\nAccess-Control-Allow-Origin: https://app.example.com\nAccess-Control-Allow-Methods: POST\nAccess-Control-Allow-Headers: Authorization, Content-Type\nAccess-Control-Max-Age: 600\nVary: Origin

"}}] 3d:["$","p","a103560c-b006-4dcc-9e7a-922810d177f4",{"children":"200 或 204 都可以是成功的预检状态；仅有成功状态码还不够，相关 CORS 头也必须符合请求。Allow: POST 不能替代 Access-Control-Allow-Methods；Access-Control-Expose-Headers 则用于控制脚本可读的响应头，不是许可请求头。"}] 3e:["$","p","db502f6d-2017-45ea-b6c0-42dc56b83586",{"children":"第三步：浏览器确认许可后，发送真正的业务请求。"}] 3f:["$","div","8dd22a04-35ee-4e80-a173-a937cddb8f12",{"className":"article-rich-content article-code-block","dangerouslySetInnerHTML":{"__html":"

POST /orders HTTP/1.1\nHost: api.example.com\nOrigin: https://app.example.com\nContent-Type: application/json\nAuthorization: Bearer <access-token>\n\n{\"productId\":123,\"quantity\":1}

"}}] 40:["$","p","ff97ac6d-fa7b-47e8-8182-7ed2f6646ce0",{"children":"此时服

全部分类

AI 生成的 300 行 React 能直接上线吗？前端工程师的代码评审、风险把控与核心价值