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.1200OKServer:nginx/1.10.3(Ubuntu)Date:Mon,15Jul2019 22:34:45 GMTContent-Type:application/jsonContent-Length:26Connection:keep-aliveVary:Accept-EncodingContent-Security-Policy:frame-ancestors'none'Access-Control-Allow-Origin:*Access-Control-Allow-Methods:GET,POST,OPTIONSAccess-Control-Allow-Headers:Content-Type,Cookie,Set-Cookie,AuthorizationAccess-Control-Allow-Credentials:trueCache-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.