Play framework java backend with react front end doesnt return proper http response





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















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.



Options request which react front end requests



Also below are the errors and warnings in the console.



CORS



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
Without headers



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.










share|improve this question

























  • why is the CORS filter both in the enabled & disabled lists in your configuration?

    – LiorH
    Nov 17 '18 at 18:15











  • It's just for a test by doing. However, the issue is fixed and thanks for the comment.

    – Yathindra Kodithuwakku
    Nov 19 '18 at 4:30


















0















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.



Options request which react front end requests



Also below are the errors and warnings in the console.



CORS



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
Without headers



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.










share|improve this question

























  • why is the CORS filter both in the enabled & disabled lists in your configuration?

    – LiorH
    Nov 17 '18 at 18:15











  • It's just for a test by doing. However, the issue is fixed and thanks for the comment.

    – Yathindra Kodithuwakku
    Nov 19 '18 at 4:30














0












0








0


1






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.



Options request which react front end requests



Also below are the errors and warnings in the console.



CORS



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
Without headers



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.










share|improve this 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.



Options request which react front end requests



Also below are the errors and warnings in the console.



CORS



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
Without headers



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.







java reactjs playframework cors sbt






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 16 '18 at 15:13









Morteza Jalambadani

1,04411023




1,04411023










asked Nov 16 '18 at 15:09









Yathindra KodithuwakkuYathindra Kodithuwakku

2212




2212













  • why is the CORS filter both in the enabled & disabled lists in your configuration?

    – LiorH
    Nov 17 '18 at 18:15











  • It's just for a test by doing. However, the issue is fixed and thanks for the comment.

    – Yathindra Kodithuwakku
    Nov 19 '18 at 4:30



















  • why is the CORS filter both in the enabled & disabled lists in your configuration?

    – LiorH
    Nov 17 '18 at 18:15











  • It's just for a test by doing. However, the issue is fixed and thanks for the comment.

    – Yathindra Kodithuwakku
    Nov 19 '18 at 4:30

















why is the CORS filter both in the enabled & disabled lists in your configuration?

– LiorH
Nov 17 '18 at 18:15





why is the CORS filter both in the enabled & disabled lists in your configuration?

– LiorH
Nov 17 '18 at 18:15













It's just for a test by doing. However, the issue is fixed and thanks for the comment.

– Yathindra Kodithuwakku
Nov 19 '18 at 4:30





It's just for a test by doing. However, the issue is fixed and thanks for the comment.

– Yathindra Kodithuwakku
Nov 19 '18 at 4:30












1 Answer
1






active

oldest

votes


















0














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.






share|improve this answer
























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53340485%2fplay-framework-java-backend-with-react-front-end-doesnt-return-proper-http-respo%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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.






    share|improve this answer




























      0














      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.






      share|improve this answer


























        0












        0








        0







        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.






        share|improve this answer













        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 19 '18 at 4:32









        Yathindra KodithuwakkuYathindra Kodithuwakku

        2212




        2212
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53340485%2fplay-framework-java-backend-with-react-front-end-doesnt-return-proper-http-respo%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            List item for chat from Array inside array React Native

            Thiostrepton

            Caerphilly