Cannot display values cause of CORS policy
I have a Invision Community forum running on v4.3.6, with two themes.
I am working on a newer one, and I want to display online/total members given by a json db.
To do this, I made this script that works only on a old theme:
<p style="margin: 0;">
Online <img alt="on.svg" src="https://www.xxxxxx.xxxxx/forum/uploads/on.svg" style="width:8px; margin: 0 0 3px 0;"><span id="d-online"></span> | Membri în total <img alt="total.svg" src="https://www.xxxxxx.xxxxxx/forum/uploads/total.svg" style="width: 8px; margin: 0 0 3px 0;"><span id="d-total"></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://XXXXXXXXXX.xyz/morpheus/db.json', function(jd) {
$('#d-online').append(" ", jd.online);
$('#d-total').append(" ", jd.total);
});
});
</script>
That should give me this:
https://i.imgur.com/I4FdhSN.png
On the newer theme that I'm working on, chrome outputs this error in console:
https://i.imgur.com/n3AL86E.png
I tried
Making a .htaccess file in the root folder of the website, with these rules
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
But it didn't work at all, the error still shows up.
Instead of *on the Access-Control-Allow-Origin field, I tried to put the website that hosts that db.json as origin, but it didn't work.
So I tried putting the htaccess file inside /forum/ folder, where the forum is located, but nothing.
I tried following the steps on this website, but nothing, javascript nor php didn't work.
Error:
Access to XMLHttpRequest at 'https://xxxxxxxxxx.xyz/morpheus/db.json?csrfKey=3e4139dc5b1b138ab0bcbdf7d20e4735' from origin 'https://www.xxxxxxxxxx.ro' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
Here are some screenshots of the db.json headers in the chrome console:
https://i.imgur.com/HMbeRV1.png
https://i.imgur.com/xCoDT6R.png
How can I fix this?
javascript apache .htaccess cors
asked Nov 25 '18 at 22:55
slashslash
63
add a comment |
I have a Invision Community forum running on v4.3.6, with two themes.
I am working on a newer one, and I want to display online/total members given by a json db.
To do this, I made this script that works only on a old theme:
<p style="margin: 0;">
Online <img alt="on.svg" src="https://www.xxxxxx.xxxxx/forum/uploads/on.svg" style="width:8px; margin: 0 0 3px 0;"><span id="d-online"></span> | Membri în total <img alt="total.svg" src="https://www.xxxxxx.xxxxxx/forum/uploads/total.svg" style="width: 8px; margin: 0 0 3px 0;"><span id="d-total"></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://XXXXXXXXXX.xyz/morpheus/db.json', function(jd) {
$('#d-online').append(" ", jd.online);
$('#d-total').append(" ", jd.total);
});
});
</script>
That should give me this:
https://i.imgur.com/I4FdhSN.png
On the newer theme that I'm working on, chrome outputs this error in console:
https://i.imgur.com/n3AL86E.png
I tried
Making a .htaccess file in the root folder of the website, with these rules
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
But it didn't work at all, the error still shows up.
Instead of *on the Access-Control-Allow-Origin field, I tried to put the website that hosts that db.json as origin, but it didn't work.
So I tried putting the htaccess file inside /forum/ folder, where the forum is located, but nothing.
I tried following the steps on this website, but nothing, javascript nor php didn't work.
Error:
Access to XMLHttpRequest at 'https://xxxxxxxxxx.xyz/morpheus/db.json?csrfKey=3e4139dc5b1b138ab0bcbdf7d20e4735' from origin 'https://www.xxxxxxxxxx.ro' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
Here are some screenshots of the db.json headers in the chrome console:
https://i.imgur.com/HMbeRV1.png
https://i.imgur.com/xCoDT6R.png
How can I fix this?
javascript apache .htaccess cors
asked Nov 25 '18 at 22:55
slashslash
63
Inspect the network traffic in your browser's Network console. Have a look at the request and response headers for theOPTIONSrequest. Post screenshots if you can
– Phil
Nov 25 '18 at 23:01
Done, I added some screenshots; are those the correct one?
– slash
Nov 25 '18 at 23:12
Yep, that's what I was after. Have you made sure the Apache headers module is installed and enabled? Perhaps try usingHeader always set ...instead ofHeader add
– Phil
Nov 25 '18 at 23:17
Header always setdoesn't work. I don't know if the Apache headers module is installed and enabled, but I assume yes because on the other theme that script works perfectly. Also I don't have ssh access because my webhost doesn't provide me that, so I can't check if the modules are enabled...
– slash
Nov 25 '18 at 23:22
1
You also need to make Apache handle OPTIONS requests in the right way. See the answer at stackoverflow.com/questions/42558221/… and see benjaminhorn.io/code/… for a more extensive how-to.
– sideshowbarker
Nov 25 '18 at 23:24
add a comment |
I have a Invision Community forum running on v4.3.6, with two themes.
I am working on a newer one, and I want to display online/total members given by a json db.
To do this, I made this script that works only on a old theme:
<p style="margin: 0;">
Online <img alt="on.svg" src="https://www.xxxxxx.xxxxx/forum/uploads/on.svg" style="width:8px; margin: 0 0 3px 0;"><span id="d-online"></span> | Membri în total <img alt="total.svg" src="https://www.xxxxxx.xxxxxx/forum/uploads/total.svg" style="width: 8px; margin: 0 0 3px 0;"><span id="d-total"></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://XXXXXXXXXX.xyz/morpheus/db.json', function(jd) {
$('#d-online').append(" ", jd.online);
$('#d-total').append(" ", jd.total);
});
});
</script>
That should give me this:
https://i.imgur.com/I4FdhSN.png
On the newer theme that I'm working on, chrome outputs this error in console:
https://i.imgur.com/n3AL86E.png
I tried
Making a .htaccess file in the root folder of the website, with these rules
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
But it didn't work at all, the error still shows up.
Instead of *on the Access-Control-Allow-Origin field, I tried to put the website that hosts that db.json as origin, but it didn't work.
So I tried putting the htaccess file inside /forum/ folder, where the forum is located, but nothing.
I tried following the steps on this website, but nothing, javascript nor php didn't work.
Error:
Access to XMLHttpRequest at 'https://xxxxxxxxxx.xyz/morpheus/db.json?csrfKey=3e4139dc5b1b138ab0bcbdf7d20e4735' from origin 'https://www.xxxxxxxxxx.ro' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
Here are some screenshots of the db.json headers in the chrome console:
https://i.imgur.com/HMbeRV1.png
https://i.imgur.com/xCoDT6R.png
How can I fix this?
javascript apache .htaccess cors
asked Nov 25 '18 at 22:55
slashslash
63
I have a Invision Community forum running on v4.3.6, with two themes.
I am working on a newer one, and I want to display online/total members given by a json db.
To do this, I made this script that works only on a old theme:
<p style="margin: 0;">
Online <img alt="on.svg" src="https://www.xxxxxx.xxxxx/forum/uploads/on.svg" style="width:8px; margin: 0 0 3px 0;"><span id="d-online"></span> | Membri în total <img alt="total.svg" src="https://www.xxxxxx.xxxxxx/forum/uploads/total.svg" style="width: 8px; margin: 0 0 3px 0;"><span id="d-total"></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://XXXXXXXXXX.xyz/morpheus/db.json', function(jd) {
$('#d-online').append(" ", jd.online);
$('#d-total').append(" ", jd.total);
});
});
</script>
That should give me this:
https://i.imgur.com/I4FdhSN.png
On the newer theme that I'm working on, chrome outputs this error in console:
https://i.imgur.com/n3AL86E.png
I tried
Making a .htaccess file in the root folder of the website, with these rules
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
But it didn't work at all, the error still shows up.
Instead of *on the Access-Control-Allow-Origin field, I tried to put the website that hosts that db.json as origin, but it didn't work.
So I tried putting the htaccess file inside /forum/ folder, where the forum is located, but nothing.
I tried following the steps on this website, but nothing, javascript nor php didn't work.
Error:
Access to XMLHttpRequest at 'https://xxxxxxxxxx.xyz/morpheus/db.json?csrfKey=3e4139dc5b1b138ab0bcbdf7d20e4735' from origin 'https://www.xxxxxxxxxx.ro' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.
Here are some screenshots of the db.json headers in the chrome console:
https://i.imgur.com/HMbeRV1.png
https://i.imgur.com/xCoDT6R.png
How can I fix this?
javascript apache .htaccess cors
javascript apache .htaccess cors
asked Nov 25 '18 at 22:55
slashslash
63
asked Nov 25 '18 at 22:55
slashslash
63
edited Nov 25 '18 at 23:11
slash
asked Nov 25 '18 at 22:55
slashslash
63
asked Nov 25 '18 at 22:55
slashslash
63
asked Nov 25 '18 at 22:55
slashslash
63
63
Inspect the network traffic in your browser's Network console. Have a look at the request and response headers for theOPTIONSrequest. Post screenshots if you can
– Phil
Nov 25 '18 at 23:01
Done, I added some screenshots; are those the correct one?
– slash
Nov 25 '18 at 23:12
Yep, that's what I was after. Have you made sure the Apache headers module is installed and enabled? Perhaps try usingHeader always set ...instead ofHeader add
– Phil
Nov 25 '18 at 23:17
Header always setdoesn't work. I don't know if the Apache headers module is installed and enabled, but I assume yes because on the other theme that script works perfectly. Also I don't have ssh access because my webhost doesn't provide me that, so I can't check if the modules are enabled...
– slash
Nov 25 '18 at 23:22
1
You also need to make Apache handle OPTIONS requests in the right way. See the answer at stackoverflow.com/questions/42558221/… and see benjaminhorn.io/code/… for a more extensive how-to.
– sideshowbarker
Nov 25 '18 at 23:24
add a comment |
Inspect the network traffic in your browser's Network console. Have a look at the request and response headers for theOPTIONSrequest. Post screenshots if you can
– Phil
Nov 25 '18 at 23:01
Done, I added some screenshots; are those the correct one?
– slash
Nov 25 '18 at 23:12
Yep, that's what I was after. Have you made sure the Apache headers module is installed and enabled? Perhaps try usingHeader always set ...instead ofHeader add
– Phil
Nov 25 '18 at 23:17
Header always setdoesn't work. I don't know if the Apache headers module is installed and enabled, but I assume yes because on the other theme that script works perfectly. Also I don't have ssh access because my webhost doesn't provide me that, so I can't check if the modules are enabled...
– slash
Nov 25 '18 at 23:22
1
You also need to make Apache handle OPTIONS requests in the right way. See the answer at stackoverflow.com/questions/42558221/… and see benjaminhorn.io/code/… for a more extensive how-to.
– sideshowbarker
Nov 25 '18 at 23:24
Inspect the network traffic in your browser's Network console. Have a look at the request and response headers for the
OPTIONS request. Post screenshots if you can– Phil
Nov 25 '18 at 23:01
Inspect the network traffic in your browser's Network console. Have a look at the request and response headers for the
OPTIONS request. Post screenshots if you can– Phil
Nov 25 '18 at 23:01
Done, I added some screenshots; are those the correct one?
– slash
Nov 25 '18 at 23:12
Done, I added some screenshots; are those the correct one?
– slash
Nov 25 '18 at 23:12
Yep, that's what I was after. Have you made sure the Apache headers module is installed and enabled? Perhaps try using
Header always set ... instead of Header add– Phil
Nov 25 '18 at 23:17
Yep, that's what I was after. Have you made sure the Apache headers module is installed and enabled? Perhaps try using
Header always set ... instead of Header add– Phil
Nov 25 '18 at 23:17
Header always set doesn't work. I don't know if the Apache headers module is installed and enabled, but I assume yes because on the other theme that script works perfectly. Also I don't have ssh access because my webhost doesn't provide me that, so I can't check if the modules are enabled...– slash
Nov 25 '18 at 23:22
Header always set doesn't work. I don't know if the Apache headers module is installed and enabled, but I assume yes because on the other theme that script works perfectly. Also I don't have ssh access because my webhost doesn't provide me that, so I can't check if the modules are enabled...– slash
Nov 25 '18 at 23:22
1
1
You also need to make Apache handle OPTIONS requests in the right way. See the answer at stackoverflow.com/questions/42558221/… and see benjaminhorn.io/code/… for a more extensive how-to.
– sideshowbarker
Nov 25 '18 at 23:24
You also need to make Apache handle OPTIONS requests in the right way. See the answer at stackoverflow.com/questions/42558221/… and see benjaminhorn.io/code/… for a more extensive how-to.
– sideshowbarker
Nov 25 '18 at 23:24
add a comment |
1 Answer
1
active
oldest
votes
To troubleshoot things like this I like to use two separate tools:
Fiddler: a browser routing tracer for all your network and CORS checking needs.
PostMan: A simple way to configure necessary headers and authentication configuration to ensure that you have all the proper parameters to access the necessary data.
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
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%2f53472829%2fcannot-display-values-cause-of-cors-policy%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
To troubleshoot things like this I like to use two separate tools:
Fiddler: a browser routing tracer for all your network and CORS checking needs.
PostMan: A simple way to configure necessary headers and authentication configuration to ensure that you have all the proper parameters to access the necessary data.
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
add a comment |
To troubleshoot things like this I like to use two separate tools:
Fiddler: a browser routing tracer for all your network and CORS checking needs.
PostMan: A simple way to configure necessary headers and authentication configuration to ensure that you have all the proper parameters to access the necessary data.
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
add a comment |
To troubleshoot things like this I like to use two separate tools:
Fiddler: a browser routing tracer for all your network and CORS checking needs.
PostMan: A simple way to configure necessary headers and authentication configuration to ensure that you have all the proper parameters to access the necessary data.
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
To troubleshoot things like this I like to use two separate tools:
Fiddler: a browser routing tracer for all your network and CORS checking needs.
PostMan: A simple way to configure necessary headers and authentication configuration to ensure that you have all the proper parameters to access the necessary data.
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
answered Nov 26 '18 at 0:07
Justin RiceJustin Rice
696
696
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%2f53472829%2fcannot-display-values-cause-of-cors-policy%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
Inspect the network traffic in your browser's Network console. Have a look at the request and response headers for the
OPTIONSrequest. Post screenshots if you can– Phil
Nov 25 '18 at 23:01
Done, I added some screenshots; are those the correct one?
– slash
Nov 25 '18 at 23:12
Yep, that's what I was after. Have you made sure the Apache headers module is installed and enabled? Perhaps try using
Header always set ...instead ofHeader add– Phil
Nov 25 '18 at 23:17
Header always setdoesn't work. I don't know if the Apache headers module is installed and enabled, but I assume yes because on the other theme that script works perfectly. Also I don't have ssh access because my webhost doesn't provide me that, so I can't check if the modules are enabled...– slash
Nov 25 '18 at 23:22
1
You also need to make Apache handle OPTIONS requests in the right way. See the answer at stackoverflow.com/questions/42558221/… and see benjaminhorn.io/code/… for a more extensive how-to.
– sideshowbarker
Nov 25 '18 at 23:24