在javascript中访问HTTPs, 提示CORS访问被阻, 在header中没有Access-Control-Allow-Origin

最新推荐文章于 2024-08-07 12:49:40 发布

月夜长影

最新推荐文章于 2024-08-07 12:49:40 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端 http

本文链接：https://blog.youkuaiyun.com/feifei3211/article/details/126349802

前端专栏收录该内容

1 篇文章

订阅专栏

本文讲述了在JavaScript中遇到CORS策略拦截的问题，通过实例代码展示了如何创建POST请求并遇到的报错，介绍了报错原因及解决方法，重点介绍了使用Fiddle模拟跨域响应以绕过CORS限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在javascript中发送一个POST请求, 提示CORS策略被拦截, 代码如下

    var xhr = new XMLHttpRequest();
    xhr.open("POST", webhook);
    // xhr.setRequestHeader("Accept", "application/json");
    xhr.setRequestHeader("content-type", "application/json");
    xhr.onload = () => console.log(xhr.responseText);
    // xhr.onload = () => console.log(xhr.responseText);
    // var data = '{"chatid":"${chat_id}","msgtype":"text","text":{"content":"<@${rtx}> Hello"}}'
    var data = '{"chatid":"' + chat_id + '","msgtype":"text","text":{"content":"<@' + rtx + '> ' + msg + '"}}'
    console.log(data)
    xhr.send(data);

报错提示

has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response 
serves your needs, set the request's 
mode to 'no-cors' to fetch the resource with CORS disabled.

原因分析

报错是因为浏览器在检查CORS的时候, 发现POST请求资源的是其他网站, 会进行检查, 如果目标网站没有开启跨站资源访问, 就会失败.

解决方法

网上有多种不同的解决办法, 比如下载插件将浏览器的CORS策略关闭, 试了较多没有效果. 或者如果目标网站是自己搭建的, 修改反馈允许CORS.
我使用Fiddle, 将浏览器请求目标网站的返回结果改了, 强制CORS检查通过.
具体为:
打开Fiddle, 添加Rule, 修改与目标网址的OPTIONS方法通信返回response:
在这里插入图片描述

HTTP/1.1 200 Generated
Server: nginx
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: content-type
Content-Length: 24

Connection: keep-alive