Empty AJAX response when URL works fine in browser

I'm trying to retrieve Canvas data for a project where I work, which self-hosts Canvas for its faculty and students. I'm using Fetch API (but have tried with other ajax methods too). However, anytime I try to GET something I just get an empty response back. Body is null and statusText is empty.

The thing that's weird is if I access the URL directly in my browser, I see the JSON just fine. But when I Fetch with the exact same URL I just see an empty response. For example, in the browser https://canvas.uchicago.edu/api/v1/users/self shows me my ID, name, sortable name, etc. Hitting that with a GET fetch gives just an empty response.

Status of the call is 200 and I'm not getting any CORS errors or anything like that, so as far as I can tell it's going through OK.

Any thoughts?

Thanks everybody!!

<SPAN class="keyword token">var</SPAN> token <SPAN class="operator token">=</SPAN> <SPAN class="comment token">// my temp token here</SPAN><BR /><SPAN class="keyword token">var</SPAN> url <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://canvas.uchicago.edu/api/v1/users/self/" rel="nofollow noopener noreferrer">https://canvas.uchicago.edu/api/v1/users/self/</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR /><SPAN class="keyword token">var</SPAN> headers <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Headers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />headers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'X-Requested-With'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'XMLHttpRequest'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />headers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Authorization'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="template-string token"><SPAN class="string token">`Bearer </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>token<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR /><SPAN class="keyword token">var</SPAN> options <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  method<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'GET'</SPAN><SPAN class="punctuation token">,</SPAN><BR />  headers<SPAN class="punctuation token">:</SPAN>headers<SPAN class="punctuation token">,</SPAN><BR />  credentials<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'same-origin'</SPAN><SPAN class="punctuation token">,</SPAN><BR />  mode<SPAN class="punctuation token">:</SPAN><SPAN class="string token">'no-cors'</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><BR /><SPAN class="token function">fetch</SPAN><SPAN class="punctuation token">(</SPAN>url<SPAN class="punctuation token">,</SPAN> options<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Open API

Accepted answers

All comments

themidiman

I was able to repeat your issue with my hosted version, so I think that rules out the fact you are using a self-hosted version of Canvas.

One thing that I'm not entirely familiar with is the if-then deferred promise code you've supplied, or the limitations of the Fetch API vs XMLHttpRequest. What I do know is that if you're doing AJAX queries on API endpoints within the app, that you may be encroaching on JSON Hijacking. Canvas inserts a bit of prepended text to the JSON returned within the confines of a web browser JavaScript engine, so using JSON.parse() will cause it to choke on that prepended text. This is a security measure to be sure that JSON will never execute any code.

However I was able to work up another AJAX code snippet that does return actual data to the console. It assumes you're already in an authenticated state so you would have to add the authorization information to the header.

<SPAN class="keyword token">var</SPAN> url <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://canvas.uchicago.edu/api/v1/users/self/" rel="nofollow noopener noreferrer">https://canvas.uchicago.edu/api/v1/users/self/</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR /><SPAN class="keyword token">function</SPAN> <SPAN class="token function">ajax_get</SPAN><SPAN class="punctuation token">(</SPAN>url<SPAN class="punctuation token">,</SPAN> callback<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="keyword token">var</SPAN> xmlhttp <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">XMLHttpRequest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    xmlhttp<SPAN class="punctuation token">.</SPAN>onreadystatechange <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>xmlhttp<SPAN class="punctuation token">.</SPAN>readyState <SPAN class="operator token">==</SPAN> <SPAN class="number token">4</SPAN> <SPAN class="operator token">&&</SPAN> xmlhttp<SPAN class="punctuation token">.</SPAN>status <SPAN class="operator token">==</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />            <SPAN class="keyword token">try</SPAN> <SPAN class="punctuation token">{</SPAN><BR />                <SPAN class="keyword token">var</SPAN> data <SPAN class="operator token">=</SPAN> xmlhttp<SPAN class="punctuation token">.</SPAN>responseText<SPAN class="punctuation token">;</SPAN><BR />                    <BR />            <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />                console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">.</SPAN>message <SPAN class="operator token">+</SPAN> <SPAN class="string token">" in "</SPAN> <SPAN class="operator token">+</SPAN> xmlhttp<SPAN class="punctuation token">.</SPAN>responseText<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />                <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN><BR />            <SPAN class="punctuation token">}</SPAN><BR />            <SPAN class="token function">callback</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />        <SPAN class="punctuation token">}</SPAN><BR />    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <BR />    xmlhttp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"GET"</SPAN><SPAN class="punctuation token">,</SPAN> url<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    xmlhttp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">send</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><BR /><SPAN class="token function">ajax_get</SPAN><SPAN class="punctuation token">(</SPAN>url<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Hope this helps.

James

@dramus ,

I was able to make your code work (with the appropriate 2 changes at the top) and make it not work as well.

If you are on a page in Canvas already, so that the domain for the page where you're viewing the browser's console is your Canvas instance, it works.

If you open the developer tools from a non-Canvas page, then I get the results you're describing.

To clarify, I originally opened up the the developer tools in Chrome from a blank tab, so it thought google.com was the domain. When I tried your code there, it did not return any results, the status was 0 (not 200) and the ok was false instead of true.

Then I logged into Canvas, opened the developer tools, and re-executed the same code and I got a valid response.

Now, you may be saying ... but, but, but ... I'm sending an authorization header so it should work without being on a page inside Canvas. That's what I thought originally. What tipped me off was the error messages I was getting when I played around with your options.

First, if I'm on the Canvas page with the developer tools, I do not need credentials or mode to be specified in the options. I do need the authorization header, but this is explained in the Using Fetch - Web APIs | MDN instructions where it says:

By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set).

The takeaway there is that if you are running this script from within Canvas (like a user script), then you don't need to add the authorization headers, but you need to use credentials: 'include' in the options rather than credentials: 'same-origin'. You do not need to use the mode line when you do this.

If you are running this from within Canvas, then all you need to accomplish everything you have is this:

<SPAN class="keyword token">var</SPAN> options <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  method<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'GET'</SPAN><SPAN class="punctuation token">,</SPAN><BR />  credentials<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'include'</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR /><SPAN class="token function">fetch</SPAN><SPAN class="punctuation token">(</SPAN>url<SPAN class="punctuation token">,</SPAN> options<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Now, why wasn't it working from outside Canvas when you were including the authorization header? Let me go back to opening the Developer Tools from a blank tab. I am still logged into Canvas, just not on a Canvas page when I opened the developer tools at this point.

If I take out the credentials property completely, then I get a 404 not found for the API call. When I remove the mode: 'no-cors', then I get this (I removed the URL so Jive doesn't hyperlink it)

Failed to load <<EM>webpage URL>: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.google.com' is therefore not allowed access. The response had HTTP status code 422. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Of course, you already had that in there. What I noticed was that the Authorization header was not showing up in the Request headers, so I did some research into whether that might be an issue. I still don't know, but the Headers.has() said it had it, it just wasn't showing up in the Request Headers, but Chrome was also saying that "Provisional headers" weren't being shown.

At this point, I switched over to Firefox and still did not get the Authorization header in the request headers. But if I take out the request header completely, it comes back with a 401 (Unauthorized) error now instead of a 404 (Not Found) message, so it must be that the header is getting through.

It really appears to be related to the cross-origin restrictions that are messing you up. And it might have been as simple as you weren't on a page in Canvas when running it and you might have your solution and not need any more information.

On the other hand, if you plan on running this script from within a browser from other site, then you should probably reconsider as the token will be exposed. If you're running it from a server or a script with Node JS, then it shouldn't have the cross-origin restrictions since it wouldn't be in a browser.

Hopefully that's enough to get you headed in the right direction.

unknown

Interesting... thanks for looking at this JEFHQ12951 and @James . After researching and trying more things based on your responses, I'm pretty sure my troubles all come down to the backend servers I'm trying to reach not allowing cross origin access, like you mentioned James.

Jeffrey, I was able to get actual data back like you showed when I used a chrome extension that forces Access-Control-Allow-Origin, but other than using that I'm stuck with the CORS error (422). Additionally, if I add an authorization header to include my access token, that triggers preflight, which again runs into the CORS thing. Currently I've only been able to get this to work by including the access token in the URL, which of course I don't want to do, or by being logged into Canvas in another tab.

James, I do want to ultimately run this from a browser from another site outside Canvas. The end goal is a web app that assists teachers in some tasks, and I want to be able to run ajax calls to do things like load in the class roster. From what I've read on Canvas's documentation, as long as I use OAuth and put the token in an authorization header, I should be okay. Am I missing something? Is there a better way to go about that?

Thanks.

Unanswered Questions

Concluded Course and Canvas Data Services
Canvas Data Services sent out an alert that a course was concluded (because the course was concluded) and the status of each user in the UI is set to complete, however, the enrollments API endpoint shows the status of each user in the course as active. Is this a common issue? Have I misinterpreted how the individual…
Canvas Media Question
How can one track Canvas Media use without having the reports available from Canvas Studio? Checking API endpoints and the Data 2 schema, there do not seem to be dedicated Canvas Media endpoints. Am I missing some? A method I've considered is using the body field of the wiki_pages table, as this contains the html code of…
Canvas Catalog API - Completed Certificates
Hello, I'm trying to utilize an API call to pull completed certificates and was hoping to download and store the certs as a backup. I can successfully run the API call but it will not allow me to view the certificate unless I access the URL while signed into an account where it's "my" cert. Is there a permissions setting…
UI for weekly progression idea
UI for weekly progression idea that rest in the Schedule tab of the **K-12 UI** of Canvas it's incomplete and I really would not take it and push it into instance but I am going to post it here because in the past people like @James && @robotcars || @Steve_25 have had terrific input in the past... maybe w/their eyes and…
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…