前端日志上报时为什么总是触发跨域错误？

诸葛仕龙提问于 2026-02-07 06:43:27 阅读 77

前端

我在页面里用fetch发送错误日志到后端，但总是被浏览器拦截，显示跨域错误。尝试过加mode:’no-cors’和设置headers，但后端还是收不到数据…


<img src="broken.jpg" 
     onload="logEvent('image_loaded')"
     onerror="logError('image_failed')">

<script>
function logError(msg) {
  fetch('http://api.example.com/log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ error: msg })
  })
}
</script>

测试时发现图片加载失败会触发logError，但控制台报错”Failed to load response data”，后端日志也完全没有记录。用postman直接发同样的请求却没问题，到底是哪里设置错了？

前端日志前端监控

我来解答赞 10 收藏

反馈

1 条解答

程序员桠豪 Lv1

跨域问题光加mode:'no-cors'没用的，后端必须正确配置CORS头。你用postman能发成功是因为浏览器和postman的请求处理方式不同，浏览器会严格校验跨域请求。

前端代码改成这样：

function logError(msg) {

  fetch('http://api.example.com/log', {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify({ error: msg }),

    mode: 'cors'

  })

}

关键点在mode: 'cors'，浏览器会先发OPTIONS预检请求，然后根据后端返回的CORS头决定是否允许请求。

后端必须设置这些响应头（以Node.js为例）：

res.setHeader('Access-Control-Allow-Origin', '*');

res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

这几个头告诉浏览器：我允许跨域、允许POST、允许Content-Type头。你要是用其他后端框架，比如Java/Python/PHP，也照着这三个头配就行。

要是还收不到请求，先看浏览器Network面板里有没有OPTIONS请求，没有的话说明请求根本没发出去。有的话看下后端有没有收到OPTIONS请求，根据响应码判断CORS有没有配好。

2026-02-07 07:00