1. 从 file 协议打开页面就报 CORS这个坑到底卡在哪你在 VSCode 里写完一个 HTML双击打开浏览器地址栏是file:///C:/Users/xxx/Desktop/项目/index.html控制台立刻甩出一行红字Access to script at file:///.../js/txt.js from origin null has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.这就是典型的from origin null has been blocked by CORS policy。核心检索词先摆出来VSCode 本地 file 协议打开页面触发 CORS policyCross origin 请求只支持 http/https 等协议Live Server 就是用来把 file 协议换成 http 协议的。它适合谁适合所有在 VSCode 里写前端、用fetch/XMLHttpRequest/ES Moduleimport加载本地资源、结果被浏览器拦下来的同学。先把原理讲透不然后面改了还是懵。浏览器给每个页面分配一个「源」origin正常是协议 域名 端口比如http://127.0.0.1:5500。但当你用file://直接打开浏览器没法给本地文件一个合法源就把它标成null。这时候页面里任何跨源请求——加载 JS 模块、fetch一个本地 JSON、请求接口——浏览器都会拿null去比对目标源对不上就拦。注意报错里那句only supported for protocol schemes: http, data, chrome, chrome-extension, https意思是file根本不在允许的协议列表里所以不是「配置没写对」而是「协议本身就不合法」。很多人第一反应是去搜「CORS 怎么关」然后装一堆浏览器插件、改启动参数--disable-web-security。我试过这类做法要么失效要么把整个浏览器的安全策略拆了得不偿失。正确思路只有一个别用 file 协议起一个本地 http 服务。VSCode 里最顺手的就是 Live Server 插件它一键把当前目录变成http://127.0.0.1:5500的服务源从null变成合法 http 源跨域报错自然消失。但这里有个进阶场景也是这篇要重点解决的光起 Live Server 还不够。当你的页面不只是加载本地 JS而是要请求一个远端大模型接口比如做 AI 对话 demo请求地址如果还写成相对路径或者写错 Base URL照样会报 CORS或者报 401、reading choices。所以完整排查路径是两层第一层把 file 协议换成 httpLive Server 解决第二层把请求的 Base URL 配对TaoToken 的 API 地址解决。下面按复现、定位、修复、验证一步步走。2. 前置准备Live Server 起服务 TaoToken 拿 Key 配 Base URL这一节把两件事备齐本地 http 服务和远端接口的访问凭证。缺一个后面的验证都跑不通。2.1 装 Live Server把 file 协议换掉打开 VSCode左侧扩展面板搜Live Server作者是 Ritwick Dey安装。装完在 HTML 文件上右键会多出两项Open with Live Server启动服务并打开浏览器Stop Live Server停掉点Open with Live Server后浏览器地址会变成类似http://127.0.0.1:5500/htrml/txt.html。注意端口默认 5500根目录是你右键那个文件所在的工作区根目录。这一步做完origin就从null变成了http://127.0.0.1:5500第一层 CORS 直接消失。如果你项目结构是多层目录比如项目/htrml/txt.html那访问路径就是http://127.0.0.1:5500/htrml/txt.html路径要和实际文件层级对上否则会 404别把 404 当成 CORS 没修好。2.2 拿 TaoToken 的 Key 和 Base URL做 AI 对话 demo 时页面要请求大模型接口。这里用 TaoToken 作为统一入口它的 API 地址是https://taotoken.net/api注意这个地址不带任何查询参数就是纯 Base URL。你需要去控制台创建一个 API Key控制台入口https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI Keys 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content创建后复制那串sk-开头的 Key只显示一次存好。模型 ID 按你实际要用的填比如对话场景常用的claude-sonnet-4-5、gpt-4o之类具体以控制台模型列表为准。注意Key 不要硬编码进前端 HTML 然后提交到公开仓库。本地 demo 图省事可以但上线前一定要挪到后端代理前端只调自己的后端。到这里两件套齐了本地http://127.0.0.1:5500服务 远端https://taotoken.net/api接口。下一节开始写可复制的配置和请求代码。3. 可复制配置Live Server 参数 请求 Base URL 改写示例这一节给能直接抄的片段。分三块Live Server 的 settings 配置、前端请求代码、以及一个可选的代理配置解决「前端直连远端接口仍被 CORS 拦」的情况。3.1 Live Server 的 settings.json 配置VSCode 的 Live Server 支持在项目根目录.vscode/settings.json里定制端口、根目录、是否自动打开等。路径就是工作区下的.vscode/settings.json内容如下{ liveServer.settings.port: 5500, liveServer.settings.root: /, liveServer.settings.CustomBrowser: chrome, liveServer.settings.https: false, liveServer.settings.proxy: { enable: true, baseUri: /api, proxyUri: https://taotoken.net/api }, liveServer.settings.donotShowInfoMsg: true }逐项说清楚port服务端口默认 5500被占用就换 5501。root服务根目录/表示工作区根。如果你只想暴露某个子目录写/htrml。CustomBrowser指定用哪个浏览器打开避免默认浏览器不一致导致排查混乱。https本地是否走 https一般 false走 http 就够。proxy关键项。开启后前端请求/api/xxx会被 Live Server 转发到https://taotoken.net/api/xxx。这样浏览器看到的请求源是http://127.0.0.1:5500同源不触发 CORS真正的跨域转发由 Live Server 在服务端完成绕开了浏览器限制。donotShowInfoMsg关掉启动提示清爽。这个 proxy 配置是解决「前端直连远端接口被 CORS 拦」的正解比装浏览器插件靠谱得多。3.2 前端请求代码Base URL 改写示例假设你要做一个对话 demo页面里用fetch调接口。改写前容易踩坑的写法// 错误示范相对路径 没配代理会 404 或 CORS fetch(/v1/chat/completions, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ model: claude-sonnet-4-5, messages: [{ role: user, content: 你好 }] }) })改写后配合 3.1 的 proxy走同源/api前缀// 正确示范走 Live Server 代理同源请求 const BASE_URL /api; // 被 Live Server 转发到 https://taotoken.net/api async function chat(userText) { const resp await fetch(${BASE_URL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer sk-你的Key }, body: JSON.stringify({ model: claude-sonnet-4-5, messages: [{ role: user, content: userText }] }) }); if (!resp.ok) { console.error(HTTP, resp.status, await resp.text()); return; } const data await resp.json(); console.log(data.choices?.[0]?.message?.content); }三件套对齐检查Base URLhttps://taotoken.net/api前端写/api走代理、Keysk-开头那串、Model IDclaude-sonnet-4-5按控制台实际填。这三个任何一个写错报错都不一样第 5 节专门对照。3.3 如果你用 Cline / Claude Code 这类工具有些同学是在 VSCode 里用 Cline、Claude Code 这类编码 Agent它们的配置不在前端代码里而在工具自己的设置里。以 Cline 为例在设置面板填API Provider选 OpenAI CompatibleBase URLhttps://taotoken.net/apiAPI Keysk-你的KeyModel ID按控制台填Claude Code 走 Anthropic 协议时Base URL 填https://taotoken.net/apiKey 同样。这类工具如果报OAuth相关错误多半是认证方式选错改成 API Key 模式即可。配置文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content4. 验证请求控制台与 Network 面板怎么确认跨域真的没了改完配置别急着说「好了」要用浏览器开发者工具确认。这一节给具体动作。4.1 确认 origin 已从 null 变掉打开页面后在 Console 里敲console.log(window.location.origin);如果输出http://127.0.0.1:5500说明 file 协议已经换掉第一层 CORS 解决。如果还是null说明你根本没通过 Live Server 打开而是又双击了文件回去重新右键Open with Live Server。4.2 Network 面板看请求走向按 F12 打开开发者工具切到 Network 面板勾选Preserve log然后在页面触发一次对话请求。你会看到一条chat/completions的请求点开看Request URL应该是http://127.0.0.1:5500/api/v1/chat/completions说明走了代理。Status Code200 表示成功401 是 Key 问题404 是路径或代理没生效。Response Headers里如果有access-control-allow-origin说明跨域头正常。如果 Request URL 直接是https://taotoken.net/api/...说明代理没生效前端在直连远端这时候如果远端没返回 CORS 头浏览器照样拦。回去检查 3.1 的 proxy 配置有没有写对以及baseUri和前端请求前缀是否一致。4.3 看返回内容确认模型真的通了Network 里点开那条 200 的请求切到 Response 标签应该能看到类似结构{ choices: [ { message: { role: assistant, content: 你好有什么可以帮你 } } ] }能在 Console 里打印出data.choices[0].message.content就说明从本地 http 服务到远端接口整条链路通了。这一步是最终验收比看有没有红字更可靠。5. 本篇常见报错对照排查401 / local proxy failed / reading choices / OAuth这一节把最容易撞的四个报错摆出来对照现象找原因。每个都给你定位动作。5.1 401 Unauthorized现象Network 里请求返回 401Response 里写invalid api key或unauthorized。原因基本就三类Key 没填、Key 填错多了空格、少了字符、Key 已失效或被删。定位动作把Authorization头里的 Key 复制出来和控制台里那串逐字符比对。注意Bearer后面有一个空格别漏。如果 Key 是对的还 401去控制台确认这个 Key 是否被禁用、额度是否用完。5.2 local proxy failed现象Live Server 启动时报local proxy failed或页面请求直接 502。原因3.1 里proxyUri写错或者目标地址不可达。定位动作确认proxyUri是https://taotoken.net/api结尾不要多加斜杠也不要写成https://taotoken.net/api/有些版本对结尾斜杠敏感。再确认本机网络能正常访问该地址。改完重启 Live Server先 Stop 再 Open。5.3 Cannot read properties of undefined (reading choices)现象请求返回 200但 Console 报reading choices。原因返回结构和你代码里取的不一致。可能是接口返回了错误对象比如{error: {...}}而不是正常的choices结构你直接取data.choices[0]就炸了。定位动作先console.log(data)看完整返回。如果是错误对象按错误信息排查如果确实是正常结构但字段名不同按实际字段取。稳妥写法是先判断if (data.choices data.choices.length 0) { console.log(data.choices[0].message.content); } else { console.error(返回结构异常, data); }5.4 OAuth 相关报错现象用 Claude Code 或类似工具时报 OAuth 认证失败、token 过期之类。原因工具默认走 OAuth 登录流程但你实际想用 API Key 模式。定位动作进工具设置把认证方式从 OAuth 切成 API KeyBase URL 填https://taotoken.net/apiKey 填sk-那串。切完重启工具。这类工具的三件套Base URL Key Model ID必须同时正确缺一个都会报认证或模型不存在。5.5 还是报 from origin null如果排查一圈还是from origin null说明你压根没走 http 服务。检查浏览器地址栏是不是还是file:///。是的话回 VSCode 右键Open with Live Server。这是最容易被忽略的一条——改了半天配置结果打开方式没变。6. 把请求地址统一收口到 TaoToken后续换模型不用改代码排查到这一步你应该已经能稳定跑通Live Server 起http://127.0.0.1:5500前端请求走/api代理远端落到https://taotoken.net/apiKey 和 Model ID 对齐Network 里 200Console 里能打印出模型回复。最后给一个实用习惯把 Base URL 和模型 ID 抽成常量别散落在各处。这样以后换模型、换环境只改一处。const CONFIG { BASE_URL: /api, // 本地走代理部署后改成你的后端地址 MODEL: claude-sonnet-4-5, // 换模型只改这里 API_KEY: sk-你的Key // 上线前挪到后端 };本地 demo 阶段前端直连 Live Server 代理是最省事的组合。等你真要部署把BASE_URL换成自己后端的地址由后端去调https://taotoken.net/apiKey 放后端环境变量前端永远不碰 Key。这样既解决了 CORS也解决了密钥泄露。如果你还想在浏览器里直接对比不同模型的输出可以打开模型对话页面手动试https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。长期做编码 Agent、需要稳定额度的看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。接入细节和参数说明都在文档里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。回到最初那个报错它的本质从来不是「CORS 配置难」而是「你用错了协议」。file 协议给不了合法源浏览器只能标nullnull发跨源请求必被拦。Live Server 把协议换成 http问题就解了一半请求地址再收口到统一的 Base URL问题就全解了。下次再看到from origin null先看地址栏再看 Network 里的 Request URL两眼看穿。
