6

I have an Android, Ios and web app that's using php as a backend. All Api's are working fine in both android and ios but throwing CORS error in web. Getting error like this

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

I tried to send headers: {'Access-Control-Allow-Origin': 'http://localhost:49168', "Origin": "http://localhost:49168" }, to http request. Web is working smoothly if i add CORS extension for chrome. Please help me out

Kavana Shettigar
  • 419
  • 4
  • 8
  • possible duplicate of https://stackoverflow.com/questions/60191683/xmlhttprequest-error-in-flutter-web-enabling-cors-aws-api-gateway?rq=1 ? – James Feb 16 '21 at 11:05
  • I am using form-data. Where should i add those requests? – Kavana Shettigar Feb 16 '21 at 11:27
  • Your API needs to send the Access control allow origin "your domain" / "*" headers. I'd recommend reading up on CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS – James Feb 16 '21 at 11:32
  • I already sent in post request but throwing same error – Kavana Shettigar Feb 16 '21 at 11:34
  • CORS is not something you control from the front end (Flutter). Your PHP API must send these headers. It is outlined in the link I sent. – James Feb 16 '21 at 11:36
  • sent like await http.post(url, headers: {"Access-Control-Allow-Origin": "*", },// Required for CORS support to work, body: { ....... }); – Kavana Shettigar Feb 16 '21 at 11:37
  • Does this answer your question? [Cross-Origin Request Headers(CORS) with PHP headers](https://stackoverflow.com/questions/8719276/cross-origin-request-headerscors-with-php-headers) – James Feb 16 '21 at 11:37
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228794/discussion-between-kavana-shettigar-and-james). – Kavana Shettigar Feb 16 '21 at 11:40

1 Answers1

2

The same problems hit me two weeks ago. For me, the following error is giving me a wrong direction to checking the problem:

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

It says something about the request, but turns out it had nothing to do with the request. And it also had nothing to do with the web server (apache or nginx in my case).

The solution is by adding header to the response (yes, response) from your backend. I don't know the solution for php code, but I use the following code in my golang backend to add header to the response:

// Adding CORS header to response.
func (server *WebUploadServer) addCorsHeader(res http.ResponseWriter) {
    headers := res.Header()
    // use your domain or ip address instead of "*".
    // Using "*" is allowing access from every one
    // only for development.
    headers.Add("Access-Control-Allow-Origin", "*")
    headers.Add("Vary", "Origin")
    headers.Add("Vary", "Access-Control-Request-Method")
    headers.Add("Vary", "Access-Control-Request-Headers")
    headers.Add("Access-Control-Allow-Headers", "Content-Type, Origin, Accept, token")
    headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
}


// Here we handle the web request.
func (server *WebUploadServer) webHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Println("Endpoint hit")

    server.addCorsHeader(w) // Here, we add the header to the response

    switch r.Method {
    case "POST":
        // do something here.
    case "OPTIONS":
        w.WriteHeader(http.StatusOK)
    case "GET":
        fallthrough
    default:
        fmt.Fprintf(w, "Sorry, only  POST method is supported.")
    }
}
ישו אוהב אותך
  • 26,433
  • 11
  • 70
  • 92