Access API JSON data in React
I'm Trying to build a weather app by using the ip-api to get users current latitude and longitude and pass that into the darksky api URL to get the weather JSON data. I get the lat and lon logging fine, but I get the following errors for the Darksky call. Am I doing something wrong by trying to pull the data from one API and use it another? Or is it just in the way I'm trying to do it?
-GET 'dark sky api url' 401
-Access to fetch at 'https://api.darksky....' from origin 'http://localhost:3000' has been blocked by CORS policy
getLocation = async (e) => {
e.preventDefault();
const api_call = await fetch("http://ip-api.com/json");
const data = await api_call.json();
console.log(data.lat, data.lon);
let lattitude = data.lat;
let longitude = data.lon;
const weather_call = await fetch(`https://api.darksky.net/forecast/${API_KEY}/${lattitude},${longitude}`);
const weather_data = await weather_call.json();
console.log(weather_data);
}
render() {
const {to, getLocation, ...rest} = this.props;
return (
<div className="App">
<Landing getLocation={this.getLocation}/>
</div>
);
}
javascript reactjs api geolocation
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
add a comment |
I'm Trying to build a weather app by using the ip-api to get users current latitude and longitude and pass that into the darksky api URL to get the weather JSON data. I get the lat and lon logging fine, but I get the following errors for the Darksky call. Am I doing something wrong by trying to pull the data from one API and use it another? Or is it just in the way I'm trying to do it?
-GET 'dark sky api url' 401
-Access to fetch at 'https://api.darksky....' from origin 'http://localhost:3000' has been blocked by CORS policy
getLocation = async (e) => {
e.preventDefault();
const api_call = await fetch("http://ip-api.com/json");
const data = await api_call.json();
console.log(data.lat, data.lon);
let lattitude = data.lat;
let longitude = data.lon;
const weather_call = await fetch(`https://api.darksky.net/forecast/${API_KEY}/${lattitude},${longitude}`);
const weather_data = await weather_call.json();
console.log(weather_data);
}
render() {
const {to, getLocation, ...rest} = this.props;
return (
<div className="App">
<Landing getLocation={this.getLocation}/>
</div>
);
}
javascript reactjs api geolocation
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
Do you still get the error if you change tofetch('https://api.darksky...', { mode: 'no-cors' })
– Shawn Andrews
Nov 24 '18 at 0:42
add a comment |
I'm Trying to build a weather app by using the ip-api to get users current latitude and longitude and pass that into the darksky api URL to get the weather JSON data. I get the lat and lon logging fine, but I get the following errors for the Darksky call. Am I doing something wrong by trying to pull the data from one API and use it another? Or is it just in the way I'm trying to do it?
-GET 'dark sky api url' 401
-Access to fetch at 'https://api.darksky....' from origin 'http://localhost:3000' has been blocked by CORS policy
getLocation = async (e) => {
e.preventDefault();
const api_call = await fetch("http://ip-api.com/json");
const data = await api_call.json();
console.log(data.lat, data.lon);
let lattitude = data.lat;
let longitude = data.lon;
const weather_call = await fetch(`https://api.darksky.net/forecast/${API_KEY}/${lattitude},${longitude}`);
const weather_data = await weather_call.json();
console.log(weather_data);
}
render() {
const {to, getLocation, ...rest} = this.props;
return (
<div className="App">
<Landing getLocation={this.getLocation}/>
</div>
);
}
javascript reactjs api geolocation
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
I'm Trying to build a weather app by using the ip-api to get users current latitude and longitude and pass that into the darksky api URL to get the weather JSON data. I get the lat and lon logging fine, but I get the following errors for the Darksky call. Am I doing something wrong by trying to pull the data from one API and use it another? Or is it just in the way I'm trying to do it?
-GET 'dark sky api url' 401
-Access to fetch at 'https://api.darksky....' from origin 'http://localhost:3000' has been blocked by CORS policy
getLocation = async (e) => {
e.preventDefault();
const api_call = await fetch("http://ip-api.com/json");
const data = await api_call.json();
console.log(data.lat, data.lon);
let lattitude = data.lat;
let longitude = data.lon;
const weather_call = await fetch(`https://api.darksky.net/forecast/${API_KEY}/${lattitude},${longitude}`);
const weather_data = await weather_call.json();
console.log(weather_data);
}
render() {
const {to, getLocation, ...rest} = this.props;
return (
<div className="App">
<Landing getLocation={this.getLocation}/>
</div>
);
}
javascript reactjs api geolocation
javascript reactjs api geolocation
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
asked Nov 23 '18 at 23:19
Red RabbitRed Rabbit
416
416
Do you still get the error if you change tofetch('https://api.darksky...', { mode: 'no-cors' })
– Shawn Andrews
Nov 24 '18 at 0:42
add a comment |
Do you still get the error if you change tofetch('https://api.darksky...', { mode: 'no-cors' })
– Shawn Andrews
Nov 24 '18 at 0:42
Do you still get the error if you change to
fetch('https://api.darksky...', { mode: 'no-cors' }) – Shawn Andrews
Nov 24 '18 at 0:42
Do you still get the error if you change to
fetch('https://api.darksky...', { mode: 'no-cors' }) – Shawn Andrews
Nov 24 '18 at 0:42
add a comment |
2 Answers
2
active
oldest
votes
Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API?
We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.
Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.
To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.
you can search here https://darksky.net/dev/docs/faq
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
I think you should clarify in your answer that the security risk has nothing to do with CORS... only that you're trying to discourage developers from embedding their API keys where they are exposed. Having CORS enabled is quite secure when used correctly. In fact, there are use cases where accessing your API with CORS requests would be desirable. Suppose I wanted to make a client for your service where users entered their own API key. By disabling CORS, the data must be proxied, exposing their key to my servers. Maybe this isn't a use case you're concerned with, but it is a valid one.
– Brad
Nov 24 '18 at 2:12
i agree, but in this case, darksky make that rule. I only copy the information for faq.
– Fernando Colom
Nov 24 '18 at 2:22
Update your answer then, rather than copying/pasting.
– Brad
Nov 24 '18 at 2:30
add a comment |
Your problem is that you're exposing the API key on your frontend. You have to make the call from your backend.
answered 8 hours ago
Colin DanielColin Daniel
1126
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%2f53453805%2faccess-api-json-data-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API?
We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.
Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.
To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.
you can search here https://darksky.net/dev/docs/faq
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
I think you should clarify in your answer that the security risk has nothing to do with CORS... only that you're trying to discourage developers from embedding their API keys where they are exposed. Having CORS enabled is quite secure when used correctly. In fact, there are use cases where accessing your API with CORS requests would be desirable. Suppose I wanted to make a client for your service where users entered their own API key. By disabling CORS, the data must be proxied, exposing their key to my servers. Maybe this isn't a use case you're concerned with, but it is a valid one.
– Brad
Nov 24 '18 at 2:12
i agree, but in this case, darksky make that rule. I only copy the information for faq.
– Fernando Colom
Nov 24 '18 at 2:22
Update your answer then, rather than copying/pasting.
– Brad
Nov 24 '18 at 2:30
add a comment |
Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API?
We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.
Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.
To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.
you can search here https://darksky.net/dev/docs/faq
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
I think you should clarify in your answer that the security risk has nothing to do with CORS... only that you're trying to discourage developers from embedding their API keys where they are exposed. Having CORS enabled is quite secure when used correctly. In fact, there are use cases where accessing your API with CORS requests would be desirable. Suppose I wanted to make a client for your service where users entered their own API key. By disabling CORS, the data must be proxied, exposing their key to my servers. Maybe this isn't a use case you're concerned with, but it is a valid one.
– Brad
Nov 24 '18 at 2:12
i agree, but in this case, darksky make that rule. I only copy the information for faq.
– Fernando Colom
Nov 24 '18 at 2:22
Update your answer then, rather than copying/pasting.
– Brad
Nov 24 '18 at 2:30
add a comment |
Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API?
We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.
Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.
To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.
you can search here https://darksky.net/dev/docs/faq
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API?
We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.
Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.
To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.
you can search here https://darksky.net/dev/docs/faq
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
answered Nov 24 '18 at 1:58
Fernando ColomFernando Colom
1662
1662
I think you should clarify in your answer that the security risk has nothing to do with CORS... only that you're trying to discourage developers from embedding their API keys where they are exposed. Having CORS enabled is quite secure when used correctly. In fact, there are use cases where accessing your API with CORS requests would be desirable. Suppose I wanted to make a client for your service where users entered their own API key. By disabling CORS, the data must be proxied, exposing their key to my servers. Maybe this isn't a use case you're concerned with, but it is a valid one.
– Brad
Nov 24 '18 at 2:12
i agree, but in this case, darksky make that rule. I only copy the information for faq.
– Fernando Colom
Nov 24 '18 at 2:22
Update your answer then, rather than copying/pasting.
– Brad
Nov 24 '18 at 2:30
add a comment |
I think you should clarify in your answer that the security risk has nothing to do with CORS... only that you're trying to discourage developers from embedding their API keys where they are exposed. Having CORS enabled is quite secure when used correctly. In fact, there are use cases where accessing your API with CORS requests would be desirable. Suppose I wanted to make a client for your service where users entered their own API key. By disabling CORS, the data must be proxied, exposing their key to my servers. Maybe this isn't a use case you're concerned with, but it is a valid one.
– Brad
Nov 24 '18 at 2:12
i agree, but in this case, darksky make that rule. I only copy the information for faq.
– Fernando Colom
Nov 24 '18 at 2:22
Update your answer then, rather than copying/pasting.
– Brad
Nov 24 '18 at 2:30
I think you should clarify in your answer that the security risk has nothing to do with CORS... only that you're trying to discourage developers from embedding their API keys where they are exposed. Having CORS enabled is quite secure when used correctly. In fact, there are use cases where accessing your API with CORS requests would be desirable. Suppose I wanted to make a client for your service where users entered their own API key. By disabling CORS, the data must be proxied, exposing their key to my servers. Maybe this isn't a use case you're concerned with, but it is a valid one.
– Brad
Nov 24 '18 at 2:12
I think you should clarify in your answer that the security risk has nothing to do with CORS... only that you're trying to discourage developers from embedding their API keys where they are exposed. Having CORS enabled is quite secure when used correctly. In fact, there are use cases where accessing your API with CORS requests would be desirable. Suppose I wanted to make a client for your service where users entered their own API key. By disabling CORS, the data must be proxied, exposing their key to my servers. Maybe this isn't a use case you're concerned with, but it is a valid one.
– Brad
Nov 24 '18 at 2:12
i agree, but in this case, darksky make that rule. I only copy the information for faq.
– Fernando Colom
Nov 24 '18 at 2:22
i agree, but in this case, darksky make that rule. I only copy the information for faq.
– Fernando Colom
Nov 24 '18 at 2:22
Update your answer then, rather than copying/pasting.
– Brad
Nov 24 '18 at 2:30
Update your answer then, rather than copying/pasting.
– Brad
Nov 24 '18 at 2:30
add a comment |
Your problem is that you're exposing the API key on your frontend. You have to make the call from your backend.
answered 8 hours ago
Colin DanielColin Daniel
1126
add a comment |
Your problem is that you're exposing the API key on your frontend. You have to make the call from your backend.
answered 8 hours ago
Colin DanielColin Daniel
1126
add a comment |
Your problem is that you're exposing the API key on your frontend. You have to make the call from your backend.
answered 8 hours ago
Colin DanielColin Daniel
1126
Your problem is that you're exposing the API key on your frontend. You have to make the call from your backend.
answered 8 hours ago
Colin DanielColin Daniel
1126
answered 8 hours ago
Colin DanielColin Daniel
1126
answered 8 hours ago
Colin DanielColin Daniel
1126
answered 8 hours ago
Colin DanielColin Daniel
1126
1126
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%2f53453805%2faccess-api-json-data-in-react%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
Do you still get the error if you change to
fetch('https://api.darksky...', { mode: 'no-cors' })– Shawn Andrews
Nov 24 '18 at 0:42