0

早上好。我正在为我的 Wikipedia Web 应用程序编写 JavaScript 代码，文本编辑器中没有突出显示任何错误，但我的 CodePen 控制台显示为空白，我的 Google Chrome 开发人员控制台显示如下：

（也请参见以下屏幕截图） 选项 https://codepen.io/boomerang/iFrameKey-3deeb31e-ff4d-2d1d-6e27-aefecf3b427d/wrongfile.txt 404 ()

无法加载 https://codepen.io/boomerang/iFrameKey-3deeb31e-ff4d-2d1d-6e27-aefecf3b427d/wrongfile.txt：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。 因此，不允许访问源“ https://s.codepen.io ” 。响应具有 HTTP 状态代码 404。

控制台错误

请参阅此处的 CodePen 链接：https ://codepen.io/IDCoder/pen/rpdBQJ?editors=1011

在此处查看 JavaScript 代码：

//JavaScript function under construction

$(document).ready(function(){ 
   //when search button is clicked, run code
   $("#search").click(function(){
     //function that gets search input(query)
     var searchTerm= $("#searchTerm").val();
     //API url with searchTerm
     var url="https://en.wikipedia.org/w/api.php?action=opensearch&search= "+ searchTerm +" &format=json&callback=?";

     $.ajax({
       type: "GET", 
       url:url,
       async: false,
       dataType:"json",
       success:function(data){
         console.log(data);
       },
       error: function(errorMessage){
         alert("error");
       }



     });

   }); //search
        function handleAjaxError(jqXHR, textStatus, errorThrown) { } $.ajax({url: "wrongfile.txt", error: function(xhr){ alert("An error occured: " + xhr.status + " " + xhr.statusText); }}); 

});//document ready

在此处查看 html 代码：

<html>
<head>
  <title> </title>
</head>
<body>

<div class="Main">
<h1>Wikepedia Viewer App</h1>
    <div class= grid-container>
        <div class="hold-everything">   

            <div class="button-1"><a href="#">Get Random Article</a>
            </div>

            <div class="input">
            <input type= "text" id="searchTerm" placeholder="Enter text....">

            </div>

            <button id ="search" type="button" class="hit-it" v>search</button>


            <div class="social-media">
                <!-- -->
                <button id ="LI" type="button" class="linkedIn">linkedIn</button>
                <button id ="FB" type="button" class="Facebook">Facebook</button>
                <button id ="TW" type="button" class="Twitter">Twitter</button>
                <button id ="EM" type="button" class="Email">Email</button>
                <!--social-media-->
            </div>  
        </div>
    </div>  
</div>

</body>
</html>

在此先感谢您的帮助！

4

0 回答 0