Trying to get a request from a React app to Google Maps API working but getting CORS issues. Google says it supports CORS but not sure how to make the right request to be able to retrieve place data.
const src = `https://maps.googleapis.com/maps/api/place/details/json?key=${GOOGLE_API_KEY}&placed=${id}&fields=formatted_phone_number`
const headers = {
'Access-Control-Allow-Origin' : '*'
}
fetch(src, { mode: 'cors', headers: headers }).then(response => console.log(response))
The src itself is fine but getting this issue:
Failed to load
https://maps.googleapis.com/maps/api/place/details/json?key=(keyRemoved)&placed=(placeRemoved)&fields=formatted_phone_number:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8000' is therefore not allowed
access.
I think your best bet is to use the Places service in the Javascript API
https://developers.google.com/maps/documentation/javascript/reference/3.exp/places-service#PlacesService
Related
I'm making an API request to the Beehiiv API, to get my list of publications.
Inside my React component, I've set up a fetch request to the API. However the request is being being blocked by the CORS policy. Request code below:
async function makeRequest(){
const fetchOptions = {
method: 'get',
headers: {
"X-ApiKey": '<MY API KEY>',
"Content-Type": "application/json",
"Access-Control-Allow-Origin" : '*'
},
}
fetch('https://api.beehiiv.com/v1/publications', fetchOptions).then( response => response.json() )
.then( data => console.log(data) )
}
makeRequest();
The response in the console is as follows:
Access to fetch at 'https://api.beehiiv.com/v1/publications' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
Calling other API's does not seem to result in getting blocked.
Any ideas on why this may be happening? Please let me know! Thanks!
From beehiiv API documentation:
API keys are considered sensitive data and should not be shared with anyone. Be careful not to expose the API key in your source code or any other public location (including front-end code).
The API isn't supposed to be called from the frontend.
You need to make AJAX requests to your own server, which then calls the API, so the API key isn't exposed.
This question already has answers here:
CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-* headers on client side
(2 answers)
Closed 1 year ago.
I'm trying to get data from an end-point using VueJS and axios, but I keep getting the following CORS error on this code.
axios
.get(url, {
headers: {
"Access-Control-Allow-Origin": "*",
},
})
.then((response) => {
this.data = response.data;
});
Access to XMLHttpRequest at [url] from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've looked at multiple answers but the only solutions I'm seeing are using a Chrome extension or changing the server's configuration, which I do not have access to. Is there any way to solve this exclusively through the front-end?
You could use a CORS proxy, like CORS anywhere:
axios
.get("https://cors-anywhere.herokuapp.com/" + url)
.then((response) => {
this.data = response.data;
});
However, this is not a good solution for production, as it relies on an external service to handle your requests, which could lead to issues later down the line.
I'm writing totally simple JS code to connect to the Evernote sandbox, which is pretty the same as the one in the documentation:
const Evernote = require("evernote");
const client = new Evernote.Client({
token: "here-is-my-developer-token1234",
sandbox: true
});
const userStore = client.getUserStore();
userStore.getUser().then(function(user) {
console.log(user)
});
Though, I get an error about the CORS policy, which, I suppose, means that my authentification failed for some reason:
Access to fetch at 'https://sandbox.evernote.com//edam/user' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
I've got my token from there: https://sandbox.evernote.com/api/DeveloperToken.action
Perhaps there is something basic I'm missing. Any guidance would be appreciated.
As you can see in JS SDK docs, they do not support CORS, that is, header authentification as well. So you will need to use oauth.
I'm running my Vue app locally from http://localhost:8080 and I keep getting a slew of CORS errors, I've added the Access-Control-Allow-Origin header as seen blow but keep getting the following warning:
' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
const graphCall = () => {
let tokenOptions = {
method: 'POST',
uri: 'https://login.microsoftonline.com/**key**/oauth2/v2.0/token',
headers: {
'Access-Control-Allow-Origin': 'http://localhost:8080',
'contentType': 'application/x-www-form-urlencoded'
},
form: {
grant_type: VUE_APP_GRANT_TYPE,
client_secret: VUE_APP_CLIENT_SECRET,
scope: VUE_APP_SCOPE,
client_id: VUE_APP_CLIENT_ID
}
};
return rp(tokenOptions)
.then(data => {
console.log(data)
}).catch((err) => {
console.log(err);
});
};
I've tried adding mode: 'no-cors' but just get the following - Error: Invalid value for opts.mode
I've also tried '*' as the access control origin but to no avail.
Is there a way through this CORS nightmare as we need to make this call to retrieve a key!
The server has to allow your origin, in this case http://localhost:8080. Often in scenarios where you are interacting with a provider, in the admin portal where you create the tokens, you also have to specify the domain from which you intend on calling it from.
If this is not the case you may be triggering CORS because you are using a header not on the CORS safe list.
https://fetch.spec.whatwg.org/#cors-safelisted-request-header
Access-Control-Allow-Origin is normally the header supplied by the server on a response, it is not meant to be sent on the request.
The following link helped me understand CORS better.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Do note that allowing the origin of * is fine for development but not recommended for production applications.
I am making a react application where I use an API. However, I couldn't make the API work and I opted for CROSS, using a proxy URL (https://yacdn.org/proxy/). Now I can retrieve my desired information from the API but after some time my application crashes.
I get an error saying:
Access to fetch at 'https://yacdn.org/proxy/https://apps.des.qld.gov.au/species/?op=getspecies&kingdom=animals&family=Macropodidae' from origin 'http://localhost:3000' 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.
I tried using mode: 'no-cors'. I am not allowed to use Chrome-extension and was told to come up with a backend solution that just forwards (proxies) the call to the API and returns the result
How can I solve this? Any hint will be appreciated.
You can use fetch to achieve this:
fetch('https://cors.io/?https://apps.des.qld.gov.au/species/?op=getspecies&kingdom=animals&family=Macropodidae',
{
method: 'GET'
})
.then(res => {
res.text().then((s) => console.log(JSON.parse(s)))
})
.catch(error => {
// Handle your error
throw new Error('Failed while checking data from au services:' + error)
})
Use this proxy server:
https://cors.io/?...
And also for the response is important to convert into JSON object:
res.text().then((s) => console.log(JSON.parse(s)))
Hope it help you.