CORS请求未发起原因及跨域访问报错问题求助

兄弟，你这里踩了一个CORS新手常犯的坑——你把Access-Control-Allow-Origin头加错地方了！这个头是服务器返回给浏览器的响应头，用来告诉浏览器“允许哪个源的请求访问我”，不是前端请求时需要携带的字段，你现在把它放在请求头里完全起不到作用，反而还可能触发额外的预检请求。

咱们拆解下你遇到的问题：

• 你发起的GET请求设置了Content-Type: application/json，这属于CORS规则里的「复杂请求」，浏览器会先自动发送OPTIONS预检请求，询问目标服务器是否允许这个跨域请求。
• 而webhook.site的服务器并没有返回Access-Control-Allow-Origin响应头，浏览器收到这个结果后，就直接拦截了你的请求，弹出了你看到的报错。

可行的解决方案 #

方案1：用no-cors模式（适合只需要发请求、不需要读取响应的场景） #

如果你的需求只是把请求发出去，不需要处理返回的JSON数据，可以给请求加上mode: 'no-cors'，这样浏览器会跳过CORS检查，但响应会变成「不透明响应」，无法读取内容：

fetch("https://webhook.site/f9087e12-b444-4e6b-9e64-06ba47b8c24e", { 
  method: 'get', 
  mode: 'no-cors', // 开启no-cors模式
  headers: new Headers({ 
    // 删掉多余的Access-Control-Allow-Origin
    'Content-Type': 'application/json;charset=utf-8' 
  }), 
}) 
.then(res => {
  console.log('请求已成功发送，但无法读取响应内容（no-cors模式限制）');
})
.catch(error => { 
  console.log('error ' + error); 
})

方案2：搭建自己的代理服务器（适合需要读取响应的场景） #

浏览器的CORS限制只针对前端脚本，服务器端发起请求不受这个限制。你可以在自己的localhost:5001服务里加一个代理接口：

1. 前端请求同域的代理接口，比如https://localhost:5001/api/proxy-webhook
2. 你的后端收到请求后，转发到https://webhook.site/f9087e12-b444-4e6b-9e64-06ba47b8c24e
3. 后端把webhook的响应返回给前端时，在响应头里加上Access-Control-Allow-Origin: https://localhost:5001

这样前端请求的是同域接口，就不会触发CORS拦截了，还能正常读取响应内容。

额外小提醒：简化请求（仅减少预检，不解决根本问题） #

其实你的GET请求完全不需要设置Content-Type: application/json——GET请求通常没有请求体，默认的Content-Type就够用。删掉这个头后，请求会变成「简单请求」，浏览器不会发送OPTIONS预检，但如果webhook.site还是不返回允许跨域的响应头，请求还是会被拦截，所以这只能优化请求流程，解决不了核心问题。

内容的提问来源于stack exchange，提问作者chilo5432