Conquering cross-origin resource sharing (CORS) using XMLHttpRequest without relying on JSONP

Question

Conquering cross-origin resource sharing (CORS) using XMLHttpRequest without relying on JSONP

Appreciate your time in reading this inquiry!

For the past few days, I've been grappling with an AJAX request issue. Despite scouring through numerous answers on Stack Overflow, I'm still unable to find a resolution. Any assistance would be greatly appreciated.

My objective is to execute a request using vanilla JavaScript's XMLHttpRequest method to fetch data in JSON format from the Dark Sky API. Here is the URI I'm trying to send my request to (revealing my key isn't a concern) Click here for a sample API request

The root of the problem lies in encountering repeated CORS errors. While I have previously addressed this issue using JSONP requests, I am now exploring alternative routes to bypass using JSONP.

I experimented with headers, which did eliminate the CORS error in the console. However, upon inspection of the response, no data is transmitted after the request. Below is the header-less request that triggers a CORS error:

function CallAjax() {

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.darksky.net/forecast/166731d8eab28d33a26c5a51023eff4c/43.11201,-79.11857", true);
xhr.onload = function () {
    console.log(xhr.responseText);
    alert("Success");
};
xhr.send();
}

CallAjax();

Is there a possibility to make an API call that refrains from automatically responding with the header "Access-Control-Allow-Origin","http://localhost:9000/" or any other header that could circumvent the CORS error and include JSON data within the response?

Your guidance on this matter is deeply appreciated!

javascript json ajax cors

Answer 1

Answer №1

Upon deeper investigation, it has become clear that there are two potential solutions for resolving CORS errors when attempting to fetch data from APIs that restrict cross-origin requests.

Create a server-side script to fetch the data from the API and then transmit it to the browser.
Implement an API proxy service that can provide the necessary headers to avoid triggering CORS errors.

Answer 2

Upon deeper investigation, it has become clear that there are two potential solutions for resolving CORS errors when attempting to fetch data from APIs that restrict cross-origin requests.

Create a server-side script to fetch the data from the API and then transmit it to the browser.
Implement an API proxy service that can provide the necessary headers to avoid triggering CORS errors.

Answer 3

Answer №2

If you're struggling with CORS, consider using fetch(). It's built to handle CORS by default and has been a lifesaver for me in the past. Check out this code snippet for an example of how to use fetch:

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: JSON.stringify({foo:bar})
  })
  .then(function (resp){
    return resp.json()
  })
  .then(function (data) {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(function (error) {
    console.log('Request failed', error);
  });

Answer 4

If you're struggling with CORS, consider using fetch(). It's built to handle CORS by default and has been a lifesaver for me in the past. Check out this code snippet for an example of how to use fetch:

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: JSON.stringify({foo:bar})
  })
  .then(function (resp){
    return resp.json()
  })
  .then(function (data) {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(function (error) {
    console.log('Request failed', error);
  });

Conquering cross-origin resource sharing (CORS) using XMLHttpRequest without relying on JSONP

Answer №1

Answer №2

Similar questions

Utilizing a particular Google font site-wide in a Next.js project, restricted to only the default route

Error 500: Issue with JQuery AJAX File Upload

How to deselect a checkbox using AngularJS

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

Utilize JavaScript to include HTTP headers in image requests

When defining a class property in TypeScript, you can make it optional by not providing

Transforming a datetime-local Element into a Date Object

Removing the day name from an input date in React without relying on Moment.js

What is the best way to confirm that a JSON node contains child nodes with specific values assigned to them?

Is there a way to trigger a custom event from a Web Component and then intercept it within a React Functional Component for further processing?

Submitting forms with Ajax without reloading the page can cause errors in Internet Explorer

Tips for locating a file using javascript

using jQuery to eliminate an HTML element based on its attribute

Vue: Develop a master component capable of displaying a sub-component

Values in Vuex do not get updated by getters

Loop through each HTML element and store it in a JavaScript array

Extract information from a JSON string and link it to XAML code

Is it possible to set restrictions with the Calendar Extender?

Switch the paper tab to a dropdown menu in Polymer.js

What is the best way to transfer a JavaScript variable through a query string from one HTML page to another?