How To Fix ' {"readyState":0,"status":0,"statusText":"error"}' For Ajax GET Request

I'm trying build an API to insert data into my website (necessarily in different domains), but no matter how I format the response, my ajax calls fail to retrieve any data. I have

Solution 1:

Your Access-Control-Allow-Origin header is fine:

HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Date: Mon, 15 Jul 2019 22:34:45 GMT
Content-Type: application/json
Content-Length: 26
Connection: keep-alive
Vary: Accept-Encoding
Content-Security-Policy: frame-ancestors 'none'
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Cookie, Set-Cookie, Authorization
Access-Control-Allow-Credentials: true
Cache-Control: public, max-age=10

{"name":"john","age":"33"}

I suspect that the page you're loading this on is HTTPS, but your API service only supports HTTP. I can reproduce the issue via JSFiddle. (Link in the comments, because Stack Overflow won't let me put it here.)

When you have a page that uses HTTPS, any XHR or Fetch requests must also use HTTPS. Your service only responds to HTTP, which causes this error to occur.

To fix it, enable HTTPS on your API service as well.