CORS issue when using Fetch API [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
4 answers
How does Access-Control-Allow-Origin header work?
11 answers
I'm making this JavaScript project based on Challonge API.
Whenever i attempt to use fetch to either GET or POST any data, i'm being returned the infamous CORS error:
Access to fetch at 'https://api.challonge.com/v1/tournaments.json?api_key=censored' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
It works flawlessly whenever i use the "Allow-Control-Allow-Origin * " extension, for obvious reasons, however, i can't demand my clients to download this extension to use my app. I've also tried uploading the project to a webserver, with no success.
I've been scouring the web for solutions, but i'm either too incompetent to see the answer right infront of me, or i haven't looked long enough.
Either way, can any one of you guys nudge me in the right direction?
Edit: I've tried to change the request mode to no-cors, same-origin and cors, to no avail.
Edit 2: alot of the 'fixes' i've seen for this revolved around changing the server-side .htaccess to allow my domain, but i'm not working for Challonge API, and i refuse to believe that's the only way
javascript rest api cors fetch
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
marked as duplicate by sideshowbarker cors
Users with the cors badge can single-handedly close cors questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 21:39
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 1 more comment
up vote
0
down vote
favorite
This question already has an answer here:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
4 answers
How does Access-Control-Allow-Origin header work?
11 answers
I'm making this JavaScript project based on Challonge API.
Whenever i attempt to use fetch to either GET or POST any data, i'm being returned the infamous CORS error:
Access to fetch at 'https://api.challonge.com/v1/tournaments.json?api_key=censored' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
It works flawlessly whenever i use the "Allow-Control-Allow-Origin * " extension, for obvious reasons, however, i can't demand my clients to download this extension to use my app. I've also tried uploading the project to a webserver, with no success.
I've been scouring the web for solutions, but i'm either too incompetent to see the answer right infront of me, or i haven't looked long enough.
Either way, can any one of you guys nudge me in the right direction?
Edit: I've tried to change the request mode to no-cors, same-origin and cors, to no avail.
Edit 2: alot of the 'fixes' i've seen for this revolved around changing the server-side .htaccess to allow my domain, but i'm not working for Challonge API, and i refuse to believe that's the only way
javascript rest api cors fetch
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
marked as duplicate by sideshowbarker cors
Users with the cors badge can single-handedly close cors questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 21:39
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
You will need to set up a proxy either on server you control or using a third party service. The benefit of doing it on your own server is to protect exposing your api key
– charlietfl
Nov 10 at 15:04
i am using an extension, and that works just fine. However, do you mean that my only way out of this, even in production, is to proxy it?
– Kenneth Bolme Lund
Nov 10 at 15:06
Yes. Many API's don't implement CORS so you don't end up exposing your credentials. Note I am assuming you don't control that API
– charlietfl
Nov 10 at 15:07
Either proxy or enable CORS on the server from where you are requesting. Read more from developer.mozilla.org/en-US/docs/Web/HTTP/CORS
– front_end_dev
Nov 10 at 15:08
Your always able to circumvent the restriction it just might not be easy, either make the request from a domain you can communicate with and then proxy the result or you could patch your browser to now have such a check in the first place
– Jay
Nov 10 at 15:08
|
show 1 more comment
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
4 answers
How does Access-Control-Allow-Origin header work?
11 answers
I'm making this JavaScript project based on Challonge API.
Whenever i attempt to use fetch to either GET or POST any data, i'm being returned the infamous CORS error:
Access to fetch at 'https://api.challonge.com/v1/tournaments.json?api_key=censored' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
It works flawlessly whenever i use the "Allow-Control-Allow-Origin * " extension, for obvious reasons, however, i can't demand my clients to download this extension to use my app. I've also tried uploading the project to a webserver, with no success.
I've been scouring the web for solutions, but i'm either too incompetent to see the answer right infront of me, or i haven't looked long enough.
Either way, can any one of you guys nudge me in the right direction?
Edit: I've tried to change the request mode to no-cors, same-origin and cors, to no avail.
Edit 2: alot of the 'fixes' i've seen for this revolved around changing the server-side .htaccess to allow my domain, but i'm not working for Challonge API, and i refuse to believe that's the only way
javascript rest api cors fetch
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
This question already has an answer here:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
4 answers
How does Access-Control-Allow-Origin header work?
11 answers
I'm making this JavaScript project based on Challonge API.
Whenever i attempt to use fetch to either GET or POST any data, i'm being returned the infamous CORS error:
Access to fetch at 'https://api.challonge.com/v1/tournaments.json?api_key=censored' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
It works flawlessly whenever i use the "Allow-Control-Allow-Origin * " extension, for obvious reasons, however, i can't demand my clients to download this extension to use my app. I've also tried uploading the project to a webserver, with no success.
I've been scouring the web for solutions, but i'm either too incompetent to see the answer right infront of me, or i haven't looked long enough.
Either way, can any one of you guys nudge me in the right direction?
Edit: I've tried to change the request mode to no-cors, same-origin and cors, to no avail.
Edit 2: alot of the 'fixes' i've seen for this revolved around changing the server-side .htaccess to allow my domain, but i'm not working for Challonge API, and i refuse to believe that's the only way
This question already has an answer here:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
4 answers
How does Access-Control-Allow-Origin header work?
11 answers
javascript rest api cors fetch
javascript rest api cors fetch
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
edited Nov 10 at 15:05
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
asked Nov 10 at 15:03
Kenneth Bolme Lund
11
11
marked as duplicate by sideshowbarker cors
Users with the cors badge can single-handedly close cors questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 21:39
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by sideshowbarker cors
Users with the cors badge can single-handedly close cors questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 10 at 21:39
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
You will need to set up a proxy either on server you control or using a third party service. The benefit of doing it on your own server is to protect exposing your api key
– charlietfl
Nov 10 at 15:04
i am using an extension, and that works just fine. However, do you mean that my only way out of this, even in production, is to proxy it?
– Kenneth Bolme Lund
Nov 10 at 15:06
Yes. Many API's don't implement CORS so you don't end up exposing your credentials. Note I am assuming you don't control that API
– charlietfl
Nov 10 at 15:07
Either proxy or enable CORS on the server from where you are requesting. Read more from developer.mozilla.org/en-US/docs/Web/HTTP/CORS
– front_end_dev
Nov 10 at 15:08
Your always able to circumvent the restriction it just might not be easy, either make the request from a domain you can communicate with and then proxy the result or you could patch your browser to now have such a check in the first place
– Jay
Nov 10 at 15:08
|
show 1 more comment
1
You will need to set up a proxy either on server you control or using a third party service. The benefit of doing it on your own server is to protect exposing your api key
– charlietfl
Nov 10 at 15:04
i am using an extension, and that works just fine. However, do you mean that my only way out of this, even in production, is to proxy it?
– Kenneth Bolme Lund
Nov 10 at 15:06
Yes. Many API's don't implement CORS so you don't end up exposing your credentials. Note I am assuming you don't control that API
– charlietfl
Nov 10 at 15:07
Either proxy or enable CORS on the server from where you are requesting. Read more from developer.mozilla.org/en-US/docs/Web/HTTP/CORS
– front_end_dev
Nov 10 at 15:08
Your always able to circumvent the restriction it just might not be easy, either make the request from a domain you can communicate with and then proxy the result or you could patch your browser to now have such a check in the first place
– Jay
Nov 10 at 15:08
1
1
You will need to set up a proxy either on server you control or using a third party service. The benefit of doing it on your own server is to protect exposing your api key
– charlietfl
Nov 10 at 15:04
You will need to set up a proxy either on server you control or using a third party service. The benefit of doing it on your own server is to protect exposing your api key
– charlietfl
Nov 10 at 15:04
i am using an extension, and that works just fine. However, do you mean that my only way out of this, even in production, is to proxy it?
– Kenneth Bolme Lund
Nov 10 at 15:06
i am using an extension, and that works just fine. However, do you mean that my only way out of this, even in production, is to proxy it?
– Kenneth Bolme Lund
Nov 10 at 15:06
Yes. Many API's don't implement CORS so you don't end up exposing your credentials. Note I am assuming you don't control that API
– charlietfl
Nov 10 at 15:07
Yes. Many API's don't implement CORS so you don't end up exposing your credentials. Note I am assuming you don't control that API
– charlietfl
Nov 10 at 15:07
Either proxy or enable CORS on the server from where you are requesting. Read more from developer.mozilla.org/en-US/docs/Web/HTTP/CORS
– front_end_dev
Nov 10 at 15:08
Either proxy or enable CORS on the server from where you are requesting. Read more from developer.mozilla.org/en-US/docs/Web/HTTP/CORS
– front_end_dev
Nov 10 at 15:08
Your always able to circumvent the restriction it just might not be easy, either make the request from a domain you can communicate with and then proxy the result or you could patch your browser to now have such a check in the first place
– Jay
Nov 10 at 15:08
Your always able to circumvent the restriction it just might not be easy, either make the request from a domain you can communicate with and then proxy the result or you could patch your browser to now have such a check in the first place
– Jay
Nov 10 at 15:08
|
show 1 more comment
2 Answers
2
active
oldest
votes
up vote
0
down vote
I had the same issues as well and after many hours of researching on how CORS actually works, I came to the conclusion that setting up a proxy like charlietfl suggests is the best way to avoid CORS issues while developing locally. The proxy handles every request you do on your client and reroutes them to the original destination. That way you will probably not get any CORS issues.
Example: https://github.com/marhaupe/node-react-bootstrap.
Read more about that here:
https://stackoverflow.com/a/36959539/7471182
http://performantcode.com/web/do-you-really-know-cors
answered Nov 10 at 15:12
Marcel Haupenthal
412
add a comment |
up vote
0
down vote
An easy way to do it would be to request the API using your server and display it on a webpage then have your client request the webpage. Very simple example:
server.php:
echo file_get_contents('https://api.challonge.com/v1/tournaments.json?api_key=censored');
client.html:
<script>
$.get("server.php", function(data, status){
// stuff
});
</script>
answered Nov 10 at 15:16
Ivo
608
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I had the same issues as well and after many hours of researching on how CORS actually works, I came to the conclusion that setting up a proxy like charlietfl suggests is the best way to avoid CORS issues while developing locally. The proxy handles every request you do on your client and reroutes them to the original destination. That way you will probably not get any CORS issues.
Example: https://github.com/marhaupe/node-react-bootstrap.
Read more about that here:
https://stackoverflow.com/a/36959539/7471182
http://performantcode.com/web/do-you-really-know-cors
answered Nov 10 at 15:12
Marcel Haupenthal
412
add a comment |
up vote
0
down vote
I had the same issues as well and after many hours of researching on how CORS actually works, I came to the conclusion that setting up a proxy like charlietfl suggests is the best way to avoid CORS issues while developing locally. The proxy handles every request you do on your client and reroutes them to the original destination. That way you will probably not get any CORS issues.
Example: https://github.com/marhaupe/node-react-bootstrap.
Read more about that here:
https://stackoverflow.com/a/36959539/7471182
http://performantcode.com/web/do-you-really-know-cors
answered Nov 10 at 15:12
Marcel Haupenthal
412
add a comment |
up vote
0
down vote
up vote
0
down vote
I had the same issues as well and after many hours of researching on how CORS actually works, I came to the conclusion that setting up a proxy like charlietfl suggests is the best way to avoid CORS issues while developing locally. The proxy handles every request you do on your client and reroutes them to the original destination. That way you will probably not get any CORS issues.
Example: https://github.com/marhaupe/node-react-bootstrap.
Read more about that here:
https://stackoverflow.com/a/36959539/7471182
http://performantcode.com/web/do-you-really-know-cors
answered Nov 10 at 15:12
Marcel Haupenthal
412
I had the same issues as well and after many hours of researching on how CORS actually works, I came to the conclusion that setting up a proxy like charlietfl suggests is the best way to avoid CORS issues while developing locally. The proxy handles every request you do on your client and reroutes them to the original destination. That way you will probably not get any CORS issues.
Example: https://github.com/marhaupe/node-react-bootstrap.
Read more about that here:
https://stackoverflow.com/a/36959539/7471182
http://performantcode.com/web/do-you-really-know-cors
answered Nov 10 at 15:12
Marcel Haupenthal
412
answered Nov 10 at 15:12
Marcel Haupenthal
412
answered Nov 10 at 15:12
Marcel Haupenthal
412
answered Nov 10 at 15:12
Marcel Haupenthal
412
412
add a comment |
add a comment |
up vote
0
down vote
An easy way to do it would be to request the API using your server and display it on a webpage then have your client request the webpage. Very simple example:
server.php:
echo file_get_contents('https://api.challonge.com/v1/tournaments.json?api_key=censored');
client.html:
<script>
$.get("server.php", function(data, status){
// stuff
});
</script>
answered Nov 10 at 15:16
Ivo
608
add a comment |
up vote
0
down vote
An easy way to do it would be to request the API using your server and display it on a webpage then have your client request the webpage. Very simple example:
server.php:
echo file_get_contents('https://api.challonge.com/v1/tournaments.json?api_key=censored');
client.html:
<script>
$.get("server.php", function(data, status){
// stuff
});
</script>
answered Nov 10 at 15:16
Ivo
608
add a comment |
up vote
0
down vote
up vote
0
down vote
An easy way to do it would be to request the API using your server and display it on a webpage then have your client request the webpage. Very simple example:
server.php:
echo file_get_contents('https://api.challonge.com/v1/tournaments.json?api_key=censored');
client.html:
<script>
$.get("server.php", function(data, status){
// stuff
});
</script>
answered Nov 10 at 15:16
Ivo
608
An easy way to do it would be to request the API using your server and display it on a webpage then have your client request the webpage. Very simple example:
server.php:
echo file_get_contents('https://api.challonge.com/v1/tournaments.json?api_key=censored');
client.html:
<script>
$.get("server.php", function(data, status){
// stuff
});
</script>
answered Nov 10 at 15:16
Ivo
608
answered Nov 10 at 15:16
Ivo
608
answered Nov 10 at 15:16
Ivo
608
answered Nov 10 at 15:16
Ivo
608
608
add a comment |
add a comment |
1
You will need to set up a proxy either on server you control or using a third party service. The benefit of doing it on your own server is to protect exposing your api key
– charlietfl
Nov 10 at 15:04
i am using an extension, and that works just fine. However, do you mean that my only way out of this, even in production, is to proxy it?
– Kenneth Bolme Lund
Nov 10 at 15:06
Yes. Many API's don't implement CORS so you don't end up exposing your credentials. Note I am assuming you don't control that API
– charlietfl
Nov 10 at 15:07
Either proxy or enable CORS on the server from where you are requesting. Read more from developer.mozilla.org/en-US/docs/Web/HTTP/CORS
– front_end_dev
Nov 10 at 15:08
Your always able to circumvent the restriction it just might not be easy, either make the request from a domain you can communicate with and then proxy the result or you could patch your browser to now have such a check in the first place
– Jay
Nov 10 at 15:08