Upload image to imgur failed because of cors

Question

I'm trying to upload an image to imgur with js (browser) and get a CORS error:

Access to XMLHttpRequest at 'https://api.imgur.com/3/upload' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But preflight request contains Access-Control-Allow-Origin header:

The request itself:

What I'm missing? this is because access-control-allow-credentials set to true?

Aubade

The screenshot clearly shows access-control-allow-origin: * but the error says it's not there. I suspect the error is referring to a different request. – Inventor

Thanks, I added also a screenshot of the request itself. maybe I don't understand something with the CORS workflow. – Aubade

The request screenshot doesn't seem to include the response headers? – Inventor

The browser blocks the response because of the CORS policy. – Aubade

Since the preflight request succeeded with CORS headers, the browser should send the POST request. If the POST response doesn't have CORS headers, the browser disallows JavaScript from accessing the response. It should still show in the devtools though. What if you run the same request outside a browser? Maybe in Postman. Do you see CORS headers there? – Inventor

Those are the response headers of the POST request in Postman: i.imgur.com/aJeuA6C.png – Aubade

Sorry, not sure why it isn't working. I think imgur needs to respond with CORS headers, but I don't see any other questions like this. Imgur links to an official example in their API docs, maybe try that and see if it works. – Inventor

apidocs.imgur.com/#authorization-and-oauth checkout the auth in docs for it – Mercurate

@MurtazaHussain I don't understand how this link solves my problem. the request is correct, it works via postman – Aubade

Answer 1

The problem was with their API Docs :\ The URL is: https://api.imgur.com/3/image and not https://api.imgur.com/3/upload as said here: https://apidocs.imgur.com/#c85c9dfc-7487-4de2-9ecd-66f727cf3139

Aubade

Answer 2

according to doc https://api.imgur.com/3/upload doesnt have necessary header ,

but on the right side ,the curl example use https://api.imgur.com/3/image has Access-Control-Allow-Origin header

and somehow they will check your referer, which means if you are in develop mode like webpack dev mode use localhost:8000 it will always return 429 too many request exception

Neckband