HTML在线运行怎么排查跨域问题？网页API测试常见报错-html教程-PHP中文网

file://协议下所有非同路径请求均被浏览器拦截，无法发出；应使用本地服务器如live server或代理配置解决跨域问题。

html在线运行怎么排查跨域问题？网页api测试常见报错

直接用 file:// 打开 HTML 就会触发跨域

浏览器对 file:// 协议有严格限制：任何 fetch、XMLHttpRequest 或 axios 发出的请求，只要目标不是 file:// 同协议同路径，一律视为跨域。哪怕你请求的是本地 http://localhost:8080/api/users，也会报 Access to fetch at 'http://localhost:8080/api/users' from origin 'null' has been blocked by CORS policy。

这不是后端没开 CORS，而是浏览器压根不给你发请求的机会——连 OPTIONS 预检都发不出去。

别用双击打开 HTML 文件的方式测试 API，这是最常见也最容易被忽略的根源
临时解决：用 VS Code 插件 Live Server 启动，或命令行运行 npx serve -s、python3 -m http.server 8000
如果必须离线演示，把 JSON 数据写成 JS 变量（如 const mockData = { users: [...] };），绕过网络请求

fetch('/api/users') 报错 No 'Access-Control-Allow-Origin'

这个错误说明请求已发出且后端返回了响应，但响应头里缺 Access-Control-Allow-Origin。注意：它和上一条 origin 'null' 错误性质完全不同，前者是“发不出去”，后者是“收不回来”。

Wechat HTML Publisher

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

下载

开发期最稳的解法不是让后端加 CORS，而是前端配代理——把浏览器看到的请求路径伪装成同源。

Vite 项目改 vite.config.ts 的 server.proxy，例如：

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8081',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

确保前端代码始终用相对路径，比如 fetch('/api/users')，而不是 fetch('http://localhost:8081/api/users')
若后端临时开启 CORS（如 Spring Boot 加 @CrossOrigin），务必只在 dev profile 下启用，生产环境禁用

response.json() 报 Unexpected token

这说明后端返回的不是 JSON，而是 HTML（比如 404 页面）、纯文本或空响应体。常见于路径写错、路由未匹配、或后端异常时返回了错误页面而非标准 JSON。

先在浏览器地址栏直接访问该 API 地址（如 http://localhost:8081/api/users），看返回内容是不是 JSON 格式
检查响应头 Content-Type 是否为 application/json；Spring Boot 中若 Controller 方法没加 @ResponseBody 或没用 @RestController，就可能返回视图
后端抛异常时，不要裸 throw，要统一包装成 { code: 500, message: "xxx" } 并设状态码，否则前端 fetch 收到 500 但 body 是空或堆栈日志

线上部署后 API 突然 404 或 502

本地跑通、上线就崩，大概率是 Nginx 或 CDN 没配好反向代理，或者路径重写规则漏掉了前缀。

确认前端构建产物中所有 API 调用仍是相对路径（如 /api/users），而非硬编码的 http://dev-api.example.com

Nginx 配置需显式将 /api/ 转发到后端服务，例如：

location /api/ {
  proxy_pass http://backend-server/;
  proxy_set_header Host $host;
}

注意末尾斜杠：如果 proxy_pass 以 / 结尾，Nginx 会自动剥离 /api 前缀；不带结尾斜杠则不会重写路径，容易导致 404

真实联调中，最麻烦的从来不是 CORS 报错本身，而是错误信息掩盖了真正问题：你以为是跨域，其实接口根本没路由；你以为后端挂了，其实是前端拼错了 URL；你以为数据结构变了，其实是 mock 和真实接口字段名大小写不一致。每次报错，先看 network 面板里 request URL 对不对、status 是多少、response body 是什么内容——别急着搜“跨域怎么解决”。