Cross-Origin Request Blocked in my React app ... but not from other Mock API sites

#1

Hi

I’ve set up a mock API and embedded it into a fetch method in my React development application.

I have used other mock api sites (mockAPI and mock.io) and do not have any problems recovering remote JSON objects. But with mockaroo I’m getting a Cross-Origin Request Blocked message and no data. In the same application I have another page recovering data from mock.io which works. The code seems identical (apart from that pesky key).

Any suggestions?

Cheers

Graeme

#2

Can you share the URL that you’re using to connect to the mockaroo API as well as the response headers you get?

#3

Also, please include the exact message that you’re getting when requests are blocked.

#4

The api URL is
http://my.api.mockaroo.com/Modules?key=bb6adbc0

The errors are
“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [above link]. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).”
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [above link]. (Reason: CORS request did not succeed)

Apart from a “get”, I didn’t set any headers (but I’m not sure how I would find out).

I forgot to mention that I used PostCode to issue the request and that did work.

G

#5

RESOLVED

My mistake! I type “http” instead of “https”! Duh!