chrome · JavaScript
报错原文
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是什么意思
请求到达了服务器，响应也回来了，但那个响应里没有允许这个来源的头，于是浏览器拒绝把它交给你的 JavaScript。只有浏览器执行这条规则，所以同一个地址用 curl 就能通——看起来像是服务器没问题、只有浏览器坏了。要改的地方永远在服务器：给响应加上 Access-Control-Allow-Origin: http://localhost:3000。前端什么也做不了；如果服务器不是你的，经由自己的服务器转发就是唯一的路。Allow-Origin: * 对携带 cookie 的请求无效，那种情况必须写出确切来源，并同时打开 Allow-Credentials。
怎么修
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- 来自
- chrome
- JavaScript
- 15
浏览器和 node 的错误通常只告诉你什么坏了，不告诉你那个值为什么变成这样——你读了 undefined、它不是函数、它不是 JSON——所以该修的地方在抛错那一行的上游；只用 ?. 和默认值把那一行按住，同样的问题会在更远的地方、以更难辨认的样子回来。
怎么读报错
- 从第一行往下读。越往下越是工具内部的事，起因通常写在最上面。
- 有文件名和行号就从那里查——不是栈顶那一帧，而是最上面那条提到你自己写的文件的行。
- 把报错原文照样去搜，但先去掉你自己的路径和变量名，正是那些让搜索匹配不上。
- 同一种情况在不同版本里措辞不同。结果不对头，就把版本号一起加进查询。
- 粘贴修法之前，先确认它会丢掉什么。这里面有些是不能撤回的。
常见问题
Q. “Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.” 是什么意思？
请求到达了服务器，响应也回来了，但那个响应里没有允许这个来源的头，于是浏览器拒绝把它交给你的 JavaScript。只有浏览器执行这条规则，所以同一个地址用 curl 就能通——看起来像是服务器没问题、只有浏览器坏了。要改的地方永远在服务器：给响应加上 Access-Control-Allow-Origin: http://localhost:3000。前端什么也做不了；如果服务器不是你的，经由自己的服务器转发就是唯一的路。Allow-Origin: * 对携带 cookie 的请求无效，那种情况必须写出确切来源，并同时打开 Allow-Credentials。
Q. 怎么修？
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data —— 执行前先看上面的说明，确认这条命令会丢掉什么。
Q. 这是哪个工具报的？
chrome。它属于JavaScript，报错原文有 23 个词。