Getting Access to XMLHttpRequest at 'https://api.rollbar.com/api/1/item/ Error

[Hamid Hassani]

I set up the Rollbar for my angular application but after a while I'm getting this error
Access to XMLHttpRequest at 'https://api.rollbar.com/api/1/item/' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

how can I overcome this error?

[Walt Jones]

Thank you for the report. I just checked and for me the API is responding as expected with access-control-allow-origin: *.

What browser are you seeing this on? Is this intermittent for you, or continuous once you started seeing the error?

[Hamid Hassani]

@waltjones It happens in Chrome
btw whereas I put the log method in httpErrorInterceptor I'm catching this on every request
FYI, I'm using Angular v11

[Walt Jones]

If you open the chrome dev tools network tab, and select the https://api.rollbar.com/api/1/item/ request, what do the response headers look like? Is there an access-control-allow-origin header?

You should hopefully see something like this:

access-control-allow-credentials: true
access-control-allow-headers: content-type,x-rollbar-access-token
access-control-allow-methods: GET,HEAD,PUT,PATCH,POST,DELETE
access-control-allow-origin: *
alt-svc: clear
date: Wed, 07 Jul 2021 13:27:45 GMT
server: nginx/1.17.9
status: 204
via: 1.1 google
x-response-time: 0ms

[Hamid Hassani]

Request URL: https://api.rollbar.com/api/1/item/
Request Method: OPTIONS
Status Code: 403
Remote Address: 35.201.81.77:443
Referrer Policy: strict-origin-when-cross-origin
6:21
:authority: api.rollbar.com
:method: OPTIONS
:path: /api/1/item/
:scheme: https
accept: /
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
access-control-request-headers: content-type,x-rollbar-access-token
access-control-request-method: POST
origin: http://localhost:4200
referer: http://localhost:4200/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

[Walt Jones]

Those mostly seem to be request headers, and at the moment I'm more interested in the response headers. There is something interesting there though. It looks like you're getting a 403 on an OPTIONS request? The options request should return 204 even when a bad token would cause a 401 or 403 on the POST request. In all of those cases, including the OPTIONS request, the response will have access-control-allow-origin set.

If I use curl from the console, just calling the bare URL:

curl -X OPTIONS  https://api.rollbar.com/api/1/item/ -i

These response headers are returned:

HTTP/1.1 204 No Content
Server: nginx/1.17.9
Date: Wed, 07 Jul 2021 21:13:07 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
X-Response-Time: 0ms
Via: 1.1 google
Alt-Svc: clear

[Hamid Hassani]

when I use curl from the console I'm getting the below result:

Am I supposed to change my access token or put something on my requests headers?

[Walt Jones]

This looks like it is blocked by Google Cloud before it reaches the API. (api.rollbar.com is hosted on Google Cloud.) Do you know if your IP address might be blocked by Google Cloud for any reason?

As noted above, and as shown with my curl example, the OPTIONS request should succeed with no token or any special headers present.

[Eugene]

@waltjones FYI I'm also getting the same behavior - CORS preflight dies with 500 in Chrome (but works from CLI). It could be some client-side blocking, will try to investigate more.

edit: confirmed, in my case it was AdGuard blocking requests because they block all of api.rollbar.com( see here). That means for some users who use ad-blocking software, Rollbar will not be able to collect their errors.