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

本文讲述了在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

参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值