No 'Access-Control-Allow-Origin' header is present on the requested resource.
Hello,
I'm developing an POC product that connect diferents services, I use Box API with oauth2 authentication from the user side (three legged authentication) to get Documents and store the sharelinks as references. All the requests to the Box API (except for get the Access Token) are from the client side that is an Angular app.
When i make a request with an expired or invalid token i get this message in the browser console:
XMLHttpRequest cannot load https://api.box.com/2.0/files/***number removed for privacy***11?fields=expiring_embed_link. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://stage.xentrl.com' is therefore not allowed access. The response had HTTP status code 401.
I don't know how to prevent it, i read something about it and its a CORS problem because the response doesn't have the CORS headers. I added the url of my site in the Allowed Origins textbox in the app console.
-
This is a current limitation with our API. Here is why:
In order for the API to make a request from your domain to ours, its considered CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS).
The box developer console (https://app.box.com/developers/console) allows you to whitelist domains under the configuration page of your app as you mentioned.
So when your request hits our servers with an auth token, the request is 1st authenticated.
Once authenticated, it looks up the app corresponding to the provided auth token.
Once the app is found, it looks up the whitelist.
Based on the whitelist Access-Control-Allow-Origin is either added or not added to the response.
Now, in your case, you are providing an expired or incorrect auth token.
So that above authentication never happens.
Since request is un-authenticated, we cannot find the app.
Since we cannot find the app, we can't find the whitelist.
As such Access-Control-Allow-Origin header is never added to the 401 Unauthorized response.
Once the response hits the browser, it's own security now kicks in. It see that header is missing so throws a CORS error, which is what you see.
And since its a network security error, the the response in javascript will be opaque, as such wont tell you what really happened because the body is missing in the response.
There have been some talks recently to fix this, to separate out auth and CORS completely. But no ETA yet for a fix.
At the moment your best option would be to consider a network error like that, where you cannot read the response as an auth error.
-
Whitelisting worked for me. Maybe make sure that you whitelisting the exact domain presented back to you in the error message. My guess is that you are including the path. For example, if you are calling from http://localhost:8000/path, the domain to whitelist is going to be "http://localhost:8000"
-
I'm using Angular 6 to make the API call and it's NOT working for me. I've whitelisted in the CORS settings "http://localhost:4200".
I've build the http header as such:
import { HttpClient, HttpHeaders } from '@angular/common/http';httpOptions = {headers: new HttpHeaders({'Content-Type': 'application/json','Access-Control-Allow-Origin': 'http://localhost:4200'})};// append token to the headerthis.httpOptions.headers.append('Authorization', 'Bearer ' + this.accessToken );//make the API call (arbitrary folder_id)this.http.get(fullAPI_URL, this.httpOptions).subscribe(data => {console.log(data);});I'm still getting the ERROR MESSAGE:Failed to load https://api.box.com/2.0/folders/11111111111/collaborations: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401.
Please sign in to leave a comment.
Comments
5 comments