Javascript access to API via access_token

Jump to solution
andrews2
Community Novice

Hi,

I'm trying to make a web app that should interface with canvas data via the API. I know that eventually I need to get it working with the OAuth system, but for development I wanted to get it working with an access token. My code looks like the below (essentially copied from another thread here), but it gives a failed to fetch error.

In another tab on the browser, I am logged into canvas. 

Any help would be much appreciated. Thanks.

const apiToken = <TOKEN HERE>;
const options = {
'method': 'GET',
'headers': {
'authorization': 'Bearer ' + apiToken,
'content-type': 'application/json',
'accept': 'application/json'
},
'timeout': 5000
};
let outputfromcanvas;
fetch('https://canvas.wisc.edu/api/v1/courses/123218, options)
.then(res=>{outputfromcanvas = res; console.log(res)})
.catch(err=>console.log("err: ", err))
0 Likes
1 Solution
James
Community Champion

 @andrews2  

Make sure you are inside the tab that is has Canvas open when you are making the request. The browser sends extra headers to prevent cross-origin requests. For example, if you had a web-page open in one browser tab and JavaScript on that page could access information in another tab from a different origin, then a malicious program could steal your banking information or make requests as you that you didn't know about.

There is a protocol set up to allow communication from other sites, it's called Cross-Origin Resource Sharing (CORS). Canvas would have to add headers to say trust the other website that you're coming from and they're not going to do that because it is a security issue.

Putting API tokens into JavaScript and running it within a browser isn't secure either. The API requests with an authorization token are not meant to be made from within the browser. Inside the browser, it uses cookies and the Cross-Site Request Forgery (CSRF) token to authenticate instead of the API token.

One thing you could do for testing is to set up a simple proxy that took your request for Canvas and made it for you. For example, if you have control of the test.example.com server, you could set up a proxy on that server. In your application, you would call test.example.com/proxy (for example) instead of canvas.wisc.edu. It would take the request, add the Authorization header, send it off to Canvas that would now accept it since it wasn't in a browser, and then return the information to your application.

Although this is not the reason for the problem, sending content-type with a GET request is discouraged. My REST client now warns "Headers are not valid. The GET request should not contain content-* headers. It may cause the server to behave unexpectedly." They do not provide a reference for that, but the Content-Type page at the Mozilla Developer's Netowrk says "In requests, (such as POST or PUT), the client tells the server what type of data is actually sent." You're not sending any type of data beyond the query string with a GET.

View solution in original post