我的网页的一项功能已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-21

技术标签:

【中文标题】我的网页的一项功能已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头【英文标题】：One function of my webpage has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 【发布时间】：2021-09-25 23:30:35 【问题描述】：

我的网页的一项功能已被 CORS 政策阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

这个错误我该怎么办，谢谢？

网页代码：

<html>        
<tr>
         <td id="Bot_trap"> 
           <script type="text/javascript"> botQuestion(); </script>
         </td> 
         <td>Answer: <input id="Answer_please" name="human_answer" type="text" size="3" 
                      title="So that we know you are not a bot."></td>
       </tr>

</html>

botQuestion() 代码：

function botQuestion() 
  var req = false;
  req = new XMLHttpRequest();
  if( !req ) 
    return "I could not create an XMLHttpRequest object.";
  
  
  req.onreadystatechange = function() 
    if( req.readyState == 4 && req.status == 200 ) 
      var question = req.responseText;
      showQuestion(question);
    
  
  
  urlInc = url_get_question;  
  req.open("GET", urlInc, true);
  req.send(null);
 // end botQuestion()


function showQuestion(question) 
  document.getElementById("Bot_trap").innerHTML 
    = "<b>What is " + question + "? *</b>";
 // end showQuestion()

【问题讨论】：

“我应该如何处理这个错误” - 在 SO 上搜索。对于完全相同的错误消息会有一堆问题，包括如何“修复”它的答案。 【参考方案1】：

如果您想从另一个来源检索数据，来自该来源的 api 服务器应该有一个特殊的设置，允许从您想要的来源读取响应。否则，您将无法访问响应（在浏览器中）。

问题与Content Security Policy Header 或access-control-allow-origin 响应标头有关。阅读它们，您将能够解决它。

【讨论】：

这应该是一条评论

以上是关于我的网页的一项功能已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头的主要内容，如果未能解决你的问题，请参考以下文章

ReactJS：对 fetch 的访问已被 CORS 策略阻止

http://localhost:4200' 已被 CORS 策略阻止：对预检请求的响应未通过

已被 CORS 策略阻止：对预检请求的响应未通过

Angular 和播放框架从源访问 XMLHttpRequest 已被 CORS 策略阻止

本地主机已被 cors 策略请求标头字段内容类型阻止访问控制不允许

React 组件已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头