--- title: "WebGL浏览器前端HTTP请求与跨域资源共享问题" author: "Perrin Yong" author_profile: https://www.pystone.net/profile/ published_by: "Perrin Yong" canonical: https://www.pystone.net/notes/webgl-browser-http-cors-issues/ type: note content_role: unspecified visibility: public id_stability: rename-stable source_path: "10-计算机、信息技术与工程/05-游戏图形与运行时/WebGL/WebGL浏览器前端HTTP请求与跨域资源共享问题.md" content_hash: 25efd3cf628caee0856564e90207496c94ca02a29cd3781d142a57d8796a22e0 knowledge_version: 224c990773de.5fa8af6e39fa site_commit: 224c990773de166d23a886306577dd90379529ce notes_commit: 5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a --- # WebGL浏览器前端HTTP请求与跨域资源共享问题 ## 相关概念 ### Same-Origin Security Policy（SOP） **同源策略 (Same-Origin Policy, SOP)** | 要点 | 说明 | | ---------- | ---------------------------------------------------------------------------------------------------- | | **定义** | 浏览器只允许脚本访问与其页面 *协议 scheme*、*主机 host*、*端口 port* 完全一致的资源。默认禁止跨域请求（协议/域名/端口任一不同即跨域） | | **意义** | 把每一个 *Origin* 隔离成沙箱，阻止恶意站点窃读或修改另一站点的受信数据（Cookies、表单、银行信息等）。([portswigger.net][2]) | | **若无 SOP** | 任何页面都可在用户登录状态下偷偷：• 读取邮箱 / 网银 API 返回内容 → 隐私泄露• 执行受信操作（转账、删数据）→ CSRF / 账户被盗• 探测内网资产 → 越权扫描 | **作用范围**：DOM、`localStorage`、`IndexedDB`、`Cookies`、AJAX/Fetch 等。 **XMLHttpRequest / Fetch API 的 CORS 行为** * 默认 `mode: "cors"` 会触发浏览器的同源检查并自动处理预检。 * 若使用 `withCredentials = true` 或 `credentials: "include"`，服务器必须返回匹配的 `Access-Control-Allow-Credentials: true`，且 `Access-Control-Allow-Origin` 不能是 `*`。 ### 在 SOP 之上如何“合法跨域”——CORS 基本原则 **CORS** (Cross-Origin Resource Sharing) is a system, consisting of transmitting [HTTP headers](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_header), that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests. 若页面需访问位于不同源（协议、主机或端口不完全一致）的资源，则必须由**目标服务端**在 HTTP 响应中明确回送 **CORS（Cross-Origin Resource Sharing）** 相关响应头，授权当前页面的 Origin 进行跨域交互。否则，即使网络链路连通，浏览器也会在收到响应前强制拦截并抛出 “No ‘Access-Control-Allow-Origin’ header” 错误。 | 步骤 | 目的 | | ------------------------- | ---------------------------------------------------------------------- | | **① 浏览器附带 `Origin:` 请求头** | 告诉目标服务器：“谁在跨域访问你”。 | | **② 目标服务器返回 CORS 响应头** | 显式声明哪些外域可访问、可用哪些方法、是否允许携带凭证。 | | **③ 浏览器校验** | 只有当 `Access-Control-Allow-Origin` 等字段与请求匹配时，才把响应交给前端脚本；否则网络层收到但被浏览器丢弃。 | > 结论：**配置点始终在目标域（后端 / OSS / CDN），而不是在发起请求的前端。** --- ### 核心响应头速查表 | Header | 作用 | 示例值 | | ---------------------------------- | ---------------- | ---------------------------------- | | `Access-Control-Allow-Origin` | 允许的 Origin | `https://yourgame.com` 或 `*` | | `Access-Control-Allow-Methods` | 允许的 HTTP 方法 | `GET,POST,PUT,OPTIONS` | | `Access-Control-Allow-Headers` | 允许的自定义请求头 | `Content-Type,Authorization` 或 `*` | | `Access-Control-Allow-Credentials` | 是否允许 Cookie / 令牌 | `true`（配合具体 Origin，不能是 `*`） | | `Access-Control-Max-Age` | 预检结果缓存秒数 | `3600` | | `Access-Control-Expose-Headers` | 前端可读的额外响应头 | `ETag,x-oss-request-id` | --- ### 典型配置方案 #### 阿里云 OSS Bucket（控制台示例） 在使用 **阿里云 OSS** 直传文件的场景中，OSS 服务即为“目标域”，需启用 Bucket-级别的 CORS 规则。推荐采用**最小可用授权**原则，仅开放实际需要的域名、方法与头部。 | 配置项 | 建议设置 | 说明 | | ----------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------- | | **AllowedOrigin** | `https://<业务域名>``http://localhost:8080`（调试） | 必填；多域名可多行列出，必须带协议与端口 | | **AllowedMethod** | `POST` `PUT` `OPTIONS` | 若仅上传，可按需保留 `POST/PUT`；`OPTIONS` 为浏览器预检必选 | | **AllowedHeader** | `*` 或列出 `Content-Type,Authorization` | 建议开发期先放宽为 `*`，上线前收紧 | | **ExposeHeader** | `ETag,x-oss-request-id` | 供前端读取响应头 | | **MaxAgeSeconds** | `3600` | 预检结果在浏览器侧缓存时长 | | **凭证请求** | **需开启** `Access-Control-Allow-Credentials:true`（由 OSS 自动返回）并确保 `AllowedOrigin` 不为 `*` | 仅当前端使用 `withCredentials:true / credentials:'include'` 时适用 | **控制台快速配置步骤** 1. 登录 OSS 控制台 → 选择 Bucket。 2. 进入 **数据安全 › 跨域设置**，点击 **创建规则**。 3. 按上表填写，确认保存后即时生效。 **CLI / 自动化示例（ossutil）** ```html http://localhost:8080 https://yourgame.com POST PUT OPTIONS * ETag x-oss-request-id 3600 ``` 推送命令：`ossutil cors --method put oss://your-bucket cors.xml`。([help.aliyun.com][3]) > **带凭证上传**：浏览器需 `withCredentials=true`，并确保 `AllowedOrigin` 为具体域名，OSS 会自动加 `Access-Control-Allow-Credentials:true`。 --- #### Nginx 反向代理 ```nginx location /api/ { add_header Access-Control-Allow-Origin https://yourgame.com; add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS"; add_header Access-Control-Allow-Headers "*"; add_header Access-Control-Allow-Credentials true; if ($request_method = OPTIONS) { return 204; } } ``` #### Node.js / Express ```js const cors = require('cors'); app.use(cors({ origin: ['https://yourgame.com', 'http://localhost:8080'], methods: ['GET', 'POST', 'PUT'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true, maxAge: 3600 })); ``` 注意: * 如果服务器随意返回 `Access-Control-Allow-Origin: *` 并允许凭证，会暴露会话给任何站点，存在 CSRF/数据泄露风险。 * 因此服务器端 CORS 配置应尽量**最小化许可范围**。 ## 浏览器与小程序平台的差异 | 特性 | 微信小程序运行时 | 浏览器 (WebGL/H5) | | ---------------- | ---------------------------------------------------------------------------- | ------------------------------------------ | | 网络 API | `wx.request()` ➜ **原生 TCP/HTTPS**，内部实现近似 iOS/Android 的 `NSURLSession/OkHttp` | `XMLHttpRequest` / `fetch` ➜ **浏览器网络线程** | | 是否发送 `Origin:` 头 | 不发送（所以服务器根本不知道这是谁跨来的域） | 必须发送；浏览器用它比对 `Access-Control-Allow-Origin` | | 是否受同源策略 | **不受** ——「跨域」概念对它不存在 | **受** —— 默认禁止跨源，除非服务器通过 CORS 放行 | | 客户端白名单机制 | 「request 合法域名」写在微信后台，微信*本地*先检查 | 无 | | 服务器需否配置 CORS | **不用** | **必须**（否则浏览器在收到响应前就拦截） | ![assets/image-20250625193435226.png](/media/46e8c57ed21e30421992.png) ### 小程序平台 微信小游戏运行在微信的环境中，其网络请求是通过微信的客户端（即微信App）发起的，而不是直接由浏览器发起。微信小游戏使用`wx.request` API发送请求，这个API有以下特点： - **非浏览器环境**：微信小游戏的JavaScript运行环境是微信自己提供的，不是浏览器，因此不会受到浏览器的同源策略（Same-Origin Policy）限制。 - **域名白名单（客户端拦截机制）**：微信小游戏要求开发者在小程序或小游戏的后台配置请求的合法域名（即request合法域名）。微信客户端在发起请求时会检查目标域名是否在合法域名列表中，如果不在，则请求会被微信客户端阻止。这个机制是微信自己实现的，与浏览器的CORS机制无关。 - **不涉及CORS**：由于请求是由微信客户端（原生应用）发起的，而不是浏览器，所以不会触发浏览器的CORS检查。因此，即使阿里云OSS没有配置CORS规则，只要域名在微信的合法域名列表中，请求就能成功。 ### 浏览器平台 **遵循W3C规范**：浏览器严格执行 [CORS标准](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) 在浏览器环境中，当你的Web应用通过`XMLHttpRequest`或`fetch`向不同的域（如阿里云OSS的域名）发起请求时，浏览器会强制执行同源策略，并检查CORS响应头。 - **CORS机制**：浏览器会首先发送一个预检请求（OPTIONS请求）到目标服务器（阿里云OSS），询问是否允许来自`http://localhost:8080`的请求。服务器必须返回`Access-Control-Allow-Origin`响应头，并且该头部的值需要包含当前域（或`*`），浏览器才会允许实际的请求。 - **OSS配置**：阿里云OSS作为资源服务器，必须配置CORS规则以响应预检请求，即返回适当的`Access-Control-Allow-Origin`等头部。如果没有配置，浏览器就会报错，如你遇到的错误。