Question

我知道有很多关于CORS的问题，但我不太明白在这种情况下添加标题会如何适用于我，因为我没有。我正在通过freecodecamp.com学习编码，这是一项任务，我正在做一项任务，无论用户在搜索框中输入什么，都可以在维基百科上搜索文章。

注意：我尝试使用jQuery，它确实可以正常工作，但我想用vanilla JavaScript进行学习。

这是我的代码;

＆＃13;

var url, searchBox, searchText;
url = 'https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=10&search=';
searchBox = document.getElementById("searchBox");
var request = new XMLHttpRequest ();

function requestData ( e ) {
  var str = e.target.value;
  request.open("GET" , url + str );
  request.onreadystatechange = function(){
    if ( request.readyState === 4 ) {
      if ( request.status === 200 ){
        console.log(request.responseText);
      }
      
      else {
        console.log("Server returned a status code of " + request.status);
      }
    }
  };
  request.send(null);
}

searchBox.addEventListener("keyup" , requestData);

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Arimo:400,700');



/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* CSS Reset end */








body {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  font-family: 'Arimo', sans-serif;
  background: #000;
  color: #fff;
}

h1 {
  text-align: center;
  font-size: 72px;
  font-weight: 700;
}
.controls {
  width: 100%;
  margin: 65px auto;
}

input , #searchBtn {
  font-size: 40px;
  font-weight: bold;
  padding: 10px 15px;
  outline: none;
  border: none;
  
}

input {
  border-bottom: 3px solid #84ac47;
  width: 70%;
  background: transparent;
  color: #fff;
}

#searchBtn {
  background-color: #84ac47;
  color: #fff;
  border-bottom: 3px solid #58742F;
  width: 25%;
}

#randomBtn {
  outline: none;
  border: none;
  background: #fff;
  text-align: center;
  padding: 10px 15px;
  margin: 50px auto;
  color: #84ac47;
  font-size: 40px;
  width: 100%;

}


ul {
  list-style-type: none;
  margin: 0;
}

ul:before, ul:after {
  -webkit-margin: 0;
}

li {

  margin-bottom: 15px;
  font-size: 30px;
  font-weight: bold;
  background-color: #84ac47;
  padding: 15px 10px 15px 5px;
  
}

a {
  text-decoration: none;
  color: #fff;
}


.container {
  clear: both;
  
}

＆＃13;

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="wikiviewer.css">
  <title> Wikipedia Viewer </title>
</head>
<body>
  
   
  
    
  <div class="container">
     <h1> Wikipedia Viewer </h1>
      <div class="controls">
        <input type="text" id="searchBox">
      </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="wikiviewer.js"></script>
</body>
</html>

＆＃13;

Answer 1

只需在您的网址参数中添加origin=*，如下所示：

var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&datatype=json&limit=10&search=';

然后Wikipedia会给你一个带有正确标题的回复，你的浏览器会接受加载结果。

我用你的代码测试了它。只需一次更改即可。

借鉴this answer：

要触发新行为，您需要在网址参数中指定origin=*。这目前已隐藏在T62835 discussion中，尚未在documentation中说明。

虽然我正在考虑，但我建议在函数内创建XMLHttpRequest到get a new one each time you query the service。

这是一个基于您的代码的可运行示例（但简化为相关部分）：

＆＃13;

// Notice 'origin=*' in the URL:
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=3&origin=*&search=';
var searchBox = document.getElementById("searchBox");

function requestData() {
  var str = searchBox.value;
  var request = new XMLHttpRequest();
  request.open("GET" , url + str );
  request.onreadystatechange = function(){
    if ( request.readyState === 4 ) {
      if ( request.status === 200 ){
        console.log(request.responseText);
      }
      else {
        console.log("Server returned a status code of " + request.status);
      }
    }
  };
  request.send(null);
}

＆＃13;

<input type="text" id="searchBox" value="penguins">
<button id="searchButton" onclick="requestData()">Search</button>

＆＃13;

Answer 2

因此，添加标题是正确的答案。

CORS是一组规则，告诉浏览器“允许任何人攻击此端点。”

你的终端需要添加CORS标题，说“是的，对于其他网页使用我来说非常酷”。否则，当这个地址到达其他不相关的地址时，浏览器规则会说“不，这是恶作剧，请停止它。”

您需要Access-Control-Allow-Origin: *（或者如果您愿意，可以将*替换为特定的入站地址。）

编辑：有些人指出你在文本深处埋葬了你正在打维基百科。如果您使用Google搜索“wikipedia cors”，you would have gotten their instructions。

没有返回Ajax GET请求数据并给出CORS错误

2 个答案: