Proper CORS headers in fetch react

Question

I have my own API wrote in Play Scala and frontend client wrote in react.js I can't send logout request (I use OAuth2), because i get error with cors headers. I tried to fix it but i can't.

My react fetch method:

function signOut() {
    const host = "http://localhost:9000/"
    const route = "signOut";
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json','Access-Control-Allow-Origin': '*'},
        credentials: 'include',
        mode: 'cors',
    };
    return fetch(host + route, requestOptions).then((response) => response.json())
}

My scala play application.conf:

play.filters {

  # Enabled filters are run automatically against Play.
  # CSRFFilter, AllowedHostFilters, and SecurityHeadersFilters are enabled by default.
  enabled += filters.ExampleFilter
  enabled += play.filters.cors.CORSFilter
  # Disabled filters remove elements from the enabled list.
  #disabled += filters.ExampleFilter
}

enables += play.filter.cors.CorsFilter
  cors {
    # Filter paths by a whitelist of path prefixes
    #pathPrefixes = ["/some/path", ...]

    # The allowed origins. If null, all origins are allowed.
    #allowedOrigins = ["https://www.example.com"]
    allowedOrigins = ["http://localhost:3000"]
    # The allowed HTTP methods. If null, all methods are allowed
    #allowedHttpMethods = ["GET", "POST"]
        allowedHttpMethods = ["GET", "POST", "PUT", "PATCH", "OPTION", "DELETE"]
  }

Errors from my browser:

XHROPTIONShttp://localhost:9000/signOut

Moreover browser indicates that there's no header CORS „Access-Control-Allow-Origin”

Answer 1

allowedOrigins = ["http://localhost:3000"] should coresponds with your frontend app.Check all routes. BTW: If it's a public API you can turn off this filter.