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;
}
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.
java reactjs playframework cors sbt
add a comment |
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.
java reactjs playframework cors sbt
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
add a comment |
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.
java reactjs playframework cors sbt
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.
java reactjs playframework cors sbt
java reactjs playframework cors sbt
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
add a comment |
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.
add a comment |
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.
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.
answered Nov 19 '18 at 4:32
Yathindra KodithuwakkuYathindra Kodithuwakku
2212
2212
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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