前端开发服务器和 Flask 接口分别运行在两个端口时,直接打开接口地址可以看到 JSON,页面中的fetch却提示跨域。为什么相同的接口在地址栏可访问,在脚本中却读不到?本文通过一个只允许指定来源的接口,观察普通请求和OPTIONS预检的差别。
读完后,可以在浏览器网络面板核对Origin、预检请求和响应头,也可以用本机命令分别验证允许与拒绝的来源。示例只处理一个教学接口;项目上线时仍需按实际身份认证、域名、代理和接口范围制定跨域策略。
文章目录
- 地址栏能打开接口,页面请求却被拦住
- 核心概念与工作机制
- 最小示例
- 验证结果
- 常见误区与适用边界
- 总结
地址栏能打开接口,页面请求却被拦住
浏览器地址栏访问接口属于页面导航;网页脚本跨来源读取接口响应,则受浏览器的同源策略约束。“来源”由协议、主机和端口共同确定,因此http://127.0.0.1:5173与http://127.0.0.1:5000是不同来源。服务器正常返回200,并不保证浏览器会把响应交给调用它的网页脚本。
| 观察位置 | 现象 | 需要检查的字段 |
|---|---|---|
| 地址栏 | 能直接看到 JSON | 只能说明接口可访问 |
| 网络面板 | 可能先出现OPTIONS | Origin、Access-Control-Request-Method |
| 控制台 | 提示跨域或预检失败 | 服务端是否返回对应的允许来源、方法和请求头 |
核心概念与工作机制
来源与跨域许可
浏览器在跨来源请求中带上Origin。服务端可以对允许的来