24

I'm trying to use webUntis'(docs) API for a school project. For now I'm just trying to establish any kind of connection to the API.

var result;
const url = 'https://api.webuntis.dk/api/status';
var xhr = new XMLHttpRequest();

xhr.open('GET',url, true);
xhr.setRequestHeader('Access-Control-Allow-Origin','*');
xhr.setRequestHeader('Content-type','application/json');
xhr.setRequestHeader('Access-Control-Allow-Methods','GET');
xhr.setRequestHeader('X-API-KEY', '/*API KEY*/');
xhr.send();


xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        result = xhr.responseType;
        console.log(result);
    }
};

This code produces the following error message:

Cross-Origin request blocked: The same origin policy prohibits the reading of the external resource at https://api.webuntis.dk/api/status (Reason: CORS Header 'Access-Control-Allow-Origin' is missing).

How may this problem be solved? Perhaps my API key is wrong?

Disclaimer: The error message was translated from German.

x d
  • 473
  • 2
  • 4
  • 12
  • Looks pretty much that you are not requesting your own server, instead, directly to `https://api.webuntis.dk/api/status` you should create a route, request your local server and then make the request server to server – Jose Paredes Oct 17 '17 at 08:13
  • First of all, the header `Access-Control-Allow-Origin` should be on the requested file header, not in your request. – Zenoo Oct 17 '17 at 08:14
  • Does this answer your question? [CORS header 'Access-Control-Allow-Origin' missing](https://stackoverflow.com/questions/31276220/cors-header-access-control-allow-origin-missing) – Josh Correia Mar 05 '21 at 23:36

4 Answers4

19

You are making a request to another site, in this case the API at api.webuntis.dk. This type of request is called a "Cross Origin Request"

For such requests to work in JavaScript, the server on their end needs to allow them.

This is done by their server sending special CORS headers, the most basic one being the "Access-Control-Allow-Origin" header.

I guess the API provider has not foreseen or planned for this API to be used from a frontend (e.g. JavaScript in the browser), so you would have to work around this.

One way is to set up your own server and have the JavaScript code make a request to your server and your server then making a request to the API, as server side code is not bound to CORS headers.

Alternatively, to try things out, you can prefix the URL with https://cors.io like this: 

const url = 'https://cors.io/?https://api.webuntis.dk/api/status';
geekonaut
  • 5,714
  • 2
  • 28
  • 30
  • Unfortunately cors.io is no more available. Is there any alternative site? – Gibin Ealias Sep 24 '19 at 05:44
  • 2
    There's https://corsproxy.github.io/ but remember: That is only for testing / development purposes, not for production use! For production use, either proxy it through your own server or setup your own CORS proxy. – geekonaut Sep 26 '19 at 05:20
7

What is CORS ?

from MDN :

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

SOLUTION

You need to settings the CORS permission in your server. (https://api.webuntis.dk/api/status)

Setting Example :

  1. PHP

    <?php header("Access-Control-Allow-Origin: *");

  2. Rails

    #in config/application.rb config.action_dispatch.default_headers = { 'Access-Control-Allow-Origin' => '*', 'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",") }

note: Change * to specific URL that you want to allow CORS. '*' is highly discouraged, unless you are providing a public API that is intended to be accessed by any consumer out there.

Adrian Rotama
  • 301
  • 1
  • 9
  • You should provide attribution for the first section of the answer. That's [copied from MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) – Cerbrus Oct 17 '17 at 08:28
2

It basically means that this API is not configured to be called from another web page. Cross-Origin refers to making an HTTP request from one domain (origin) to another. This API is meant to be used from a server application. If you need to call it from a web page, you'll need to create a simple proxy server that your web page can call which will make the request to webUntis.

Bill
  • 25,119
  • 8
  • 94
  • 125
0

Sending Access-Control-Allow-Origin to the server solves nothing. Server has to send Access-Control-Allow-Origin set to * to your browser to allow ajax requests to run.

Paun Narcis Iulian
  • 779
  • 7
  • 15