API, CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Jump to solution
Community Explorer

Hello, all

Ok, I am completely stumped. I have spent hours watching videos, following tutorials, tinkering with both my IIS server, the webconfig file on the IIS server, and my code itself. I have just been spinning my wheels so I come begging for help!

I made a webapp using HTML and Javascript making API calls via AJAX. Below is my Javascript code. What am I missing? Any help is greatly appreciated. 

      	var API_Key = "MyAPIKEY";
      	function courseSearchID(){
      		var CourseID = document.getElementById("courseName").value;
      		console.log("Course Id:" + CourseID);

	var available = {
            "url": "https://[myDomain]/api/v1/courses/sis_course_id:" + CourseID +"?access_token="+API_Key,
            "dataType": "jsonp",
	    "type": "GET",
	    "contentType": "Application/json",
	    "crossDomain": true,
	    "Access-Control-Allow-Origin": "*",

	$.ajax(available).done(function (response) {
	    var contentname = response.name;
	    var content = response.workflow_state;
	    $("#available").append("Course Name: ").append(contentname).append("<br>Status: ").append(content);
	        console.log("Course Availability");
Labels (4)
2 Solutions
Community Contributor

When your browser attempts to make an XHR call across origins the browser will put additional checks on the response that is returned to make sure it should be allowed, this is using a standard called Cross Origin Resource Sharing (CORS). For the example you've given I think it's classed as a "Simple Request" in the CORS language and so there it's a pre-flight request, but when the response comes back the browser will check to see that it has Access-Control-Allow-Origin header and that it matches the origin that your page is being served from.

If you are attempting to make a request directly at a Canvas instance it will fail because by default Canvas doesn't return any Access-Control-Allow-Origin header in it's response, if you are talking to a self hosted instance then you could modify your Apache config to allow this (but be careful of the security implications). If you are talking to a Instructure hosted cloud instance then these headers can't be changed (as far as I'm aware).

In your code you can't the Access-Control-Allow-Origin to the request because you need it coming back on the response instead.

We've ended up building a proxy that manages OAuth tokens on behalf of other applications and then proxies requests to specific Canvas instances and adds the Access-Control-Allow-Origin headers on to the responses returned back. This allows a static HTML/JS/CSS frontend that has a signed JWT to make requests to a Canvas instance through the proxy.

View solution in original post

The proxy that we built is only configured to work with our Canvas instance at the moment so you would need to have your own proxy to support this sort of development. So you'd need to write your own server-side proxy.

We are looking at open sourcing it to allow other people to also use it, but it's not yet publicly available in GitHub.

The endpoint it runs on is: https://proxy.canvas.ox.ac.uk/ but you can't do anything with it as you don't have any tools configured for it, the page you see there is just a holding page so our monitoring tools can check it's up, all the useful endpoints either require an LTI launch or a bearer header containing a JWT from a LTI launch.

View solution in original post