播放带有响应前端的Java后端框架不会返回正确的http响应

Question

Below has my application.conf file. And note that the reason, there are several lines is, I have tried several combinations to fix the issue. But could not find any fix.

Fetch API call in React front end

fetch('http://localhost:9000/items', {
        method: 'GET'
}).then(
    response => response.json()
).then(
    data => {
        console.log(data);
    }
).catch(
    error => {
        console.error(error);
        console.log('errr');
    }
);

Application.conf file

play.filters.hosts {
   allowed = ["."]
}
play.filters.disabled += "play.filters.headers.SecurityHeadersFilter"
play.filters.disabled += play.filters.cors.CORSFilter
play.filters.disabled += play.filters.csrf.CSRFFilter
play.filters.headers.contentSecurityPolicy = "default-src 'self'; img-src 'self' https://my.img.cdn.com"
# disable the built in filters
# play.http.filters = play.api.http.NoHttpFilters
play.filters.enabled += "play.filters.cors.CORSFilter"
play.filters.cors {
  # allow all paths
  pathPrefixes = ["/"]
  # allow all origins (You can specify if you want)
  allowedOrigins = null
  allowedHttpMethods = ["GET", "POST", "PUT", "DELETE"]
  # allow all headers
  allowedHttpHeaders = ["Accept", "Content-Type"]

Below image shows the options request which react front end requests.

Also below are the errors and warnings in the console.

Then checked with removing headers in http request. Then Got 200 by sending a GET request in the network tab. But thrown an exception in the fetch api call

So it should be a cors issue in the play API it seems. But could not figure it out by doing different changes in application config.

Answer 1

I have fixed the issue and below will be the answer.

play.filters.enabled += "play.filters.cors.CORSFilter"

play.filters.cors {
  allowedOrigins = ["http://localhost:8080", "http://localhost:9000"]
  allowedHttpMethods = ["GET", "POST", "PUT", "DELETE"]
  preflightMaxAge = 3 days
}

Hope this will be helpful for anyone.