Unexpected CORS error when fetching data with Ajax GET method

Question

Unexpected CORS error when fetching data with Ajax GET method

I have a question regarding CORS that I hope someone can help me with. I am currently working on an assignment for freecodecamp.com where I need to create a Wikipedia article search based on user input. However, I am struggling to understand how adding headers would apply in my case since I don't have any. I have attempted to use jQuery, which works, but I want to achieve this using vanilla JavaScript for learning purposes.

UPDATE: Here is the JavaScript code I have been working on:

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);

In addition, here is the CSS code I have used for styling:

@import url('https://fonts.googleapis.com/css?family=Arimo:400,700');

/* CSS Reset */
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;
}
/* More CSS styles included... */

If you can provide any insight or guidance on how to handle CORS and improve my code further, I would greatly appreciate it. Thank you!

javascript json ajax xmlhttprequest cors

Answer 1

Answer №1

To include origin=* in your URL parameters, simply add it like this:

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

By doing so, you will receive a response from Wikipedia with the necessary headers for your browser to load the results.

I have personally tested this modification on your code and can confirm that it works flawlessly.

Quoting from a helpful response:

In order to activate this new functionality, it is crucial to specify origin=* in your URL parameters. Although this information is currently part of the T62835 discussion, it has not been officially documented in the documentation yet.

Additionally, I suggest creating the XMLHttpRequest inside the function to ensure a fresh object for each service query.

Below is a simple example based on your original code (with only the relevant parts included):

// Pay attention to the inclusion of '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);
}

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

Answer 2

To include origin=* in your URL parameters, simply add it like this:

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

By doing so, you will receive a response from Wikipedia with the necessary headers for your browser to load the results.

I have personally tested this modification on your code and can confirm that it works flawlessly.

Quoting from a helpful response:

In order to activate this new functionality, it is crucial to specify origin=* in your URL parameters. Although this information is currently part of the T62835 discussion, it has not been officially documented in the documentation yet.

Additionally, I suggest creating the XMLHttpRequest inside the function to ensure a fresh object for each service query.

Below is a simple example based on your original code (with only the relevant parts included):

// Pay attention to the inclusion of '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);
}

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

Answer 3

Answer №2

It's important to add headers in order to allow CORS.

CORS, which stands for Cross-Origin Resource Sharing, is a set of rules that inform browsers about which endpoints can be accessed by external sources.

To prevent issues when one address tries to interact with another unrelated address, it is necessary to include CORS headers signaling that the endpoint is open for use by other webpages.

Specifically, you need to include Access-Control-Allow-Origin: * in your headers, or specify a specific inbound address if preferred.

Additionally, if you were trying to access Wikipedia and facing CORS issues, searching "wikipedia cors" would have led you to their instructions on how to resolve this problem.

Answer 4

It's important to add headers in order to allow CORS.

CORS, which stands for Cross-Origin Resource Sharing, is a set of rules that inform browsers about which endpoints can be accessed by external sources.

To prevent issues when one address tries to interact with another unrelated address, it is necessary to include CORS headers signaling that the endpoint is open for use by other webpages.

Specifically, you need to include Access-Control-Allow-Origin: * in your headers, or specify a specific inbound address if preferred.

Additionally, if you were trying to access Wikipedia and facing CORS issues, searching "wikipedia cors" would have led you to their instructions on how to resolve this problem.

Unexpected CORS error when fetching data with Ajax GET method

Answer №1

Answer №2

Similar questions

Converting XML to JSON object by formatting string into scientific notation

Sending the `<path>` wrapped in quotes to `<SvgIcon>` is resulting in the SVG not rendering

`Issues with AJAX PHP file upload`

What could be causing this issue where the call to my controller is not functioning properly?

What is the best way to add to a variable in jQuery?

How come my Bootstrap tooltip title only updates once when I use the keydown event in jQuery?

Removing comments and extra space from multi-line regular expressions in YAML format

Looking to fill a text field with email addresses by selecting checkboxes for various towers

How can regex be utilized to convert "==", "equals" from JSON to Python and execute the standard comparison operator?

Is it possible for me to modify a JSON property within an OData response?

fullcalendar adjusting color while being moved

Laravel encountered an error: MethodNotAllowedHttpException occurred without a message

Insight into AJAX Glitches and Strategies for Avoiding Them

What is the best way to indicate progress as the canvas resizes an image?

Is it possible for index.html to reference a .js file in an Angular.js 1.x version?

Retrieve the data object in VueJS

How to use Python and JavaScript to make a WebElement visible in Selenium

Tips for managing input for objects in Vue when the object hasn't been declared yet?

Enhancing JavaScript Asynchronous Programming with EventLoop and async/await

Unable to trigger jQuery .click event