【前端】浅聊一下跨域

ops/2024/10/20 3:58:27/

文章目录

- 背景
- 关于POST，PUT请求跨域检测的步骤
- - 浏览器的处理
  - 小结

背景

一直以来，对于跨域的问题，都是让服务端配置一下允许cors，保证接口能通就行，而没有进一步深究。但是后端非要和你深究这个事情的时候，咱们就跟着gpt来了解一下这玩意儿吧。

关于POST，PUT请求跨域检测的步骤

浏览器通过一系列标准的 HTTP 请求和响应头部信息来确定后端是否支持 CORS（跨源资源共享）。以下是浏览器如何检测 CORS 支持的步骤：

预检请求（Preflight Request）
对于复杂的跨域请求（例如，使用方法如 PUT、DELETE，或自定义请求头部的请求），浏览器会先发送一个预检请求（OPTIONS 请求），以询问服务器是否允许实际的跨域请求。

预检请求示例
http
OPTIONS /resource HTTP/1.1
Host: example.com
Origin: http://example.org
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header
Access-Control-Request-Method: 指定实际请求的方法。
Access-Control-Request-Headers: 指定实际请求中将使用的自定义头部字段。
Origin: 发起请求的源（域名）。

服务器响应预检请求
服务器响应预检请求时，会包含 CORS 相关的头部，以告知浏览器是否允许实际请求。

预检响应示例
http
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://example.org
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 3600
Access-Control-Allow-Origin: 指定允许访问资源的来源。
Access-Control-Allow-Methods: 指定允许的 HTTP 方法。
Access-Control-Allow-Headers: 指定允许的自定义请求头部字段。
Access-Control-Max-Age: 指定预检请求的结果可以缓存的时间（以秒为单位）。

处理实际请求
如果预检请求成功，浏览器将发送实际请求（例如，POST 请求）：

实际请求示例
http
POST /resource HTTP/1.1
Host: example.com
Origin: http://example.org
Content-Type: application/json
X-Custom-Header: custom-value
{ "key": "value" }

服务器响应实际请求
服务器响应实际请求时，也需要包含 CORS 相关的头部：

实际请求响应示例
http
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.org
Content-Type: application/json
{ "response": "data" }
Access-Control-Allow-Origin: 同样指定允许的来源。

浏览器的处理

成功处理：如果服务器的响应头部中包含允许跨域的相关信息（如 Access-Control-Allow-Origin），并且这些信息与请求的条件匹配，浏览器将允许脚本访问响应数据。
失败处理：如果响应头部缺少必要的 CORS 信息，或信息不符合请求的条件，浏览器将拒绝访问响应数据，并可能抛出 CORS 错误。