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.
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.
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 am getting the following error when I am trying to make an api call to kickstarter Staff pick json endpoint
This is what the error exactly looks like
localhost/:1 Access to XMLHttpRequest at
'https://www.kickstarter.com/discover/recommended?format=json' from
origin 'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
I have previously encountered this error but that was when I was trying to make a local API call.
I known I can enable cors on my browser which might possibly fix the error but I am trying to avoid it.
Any ideas or fixes?
I am using axios for making api calls
axios.get("https://www.kickstarter.com/discover/recommended?format=json").then(response => {
[Update:] Can someone also help me in figuring out how we can use it with Promise.
let Base_url = axios.get(base_url)
let StaffPick = axios.get(staffPick)
return Promise.all(Base_url, StaffPick).then(response => {
Where staff pick is https://www.kickstarter.com/discover/recommended?format=json
and
base_url is: http://coincap.io/map
Try it like this and it should work:
fetch(
'https://cors-anywhere.herokuapp.com/https://www.kickstarter.com/discover/recommended?format=json')
.then(response => response.json())
.then(data => console.log(data));
Or the equivalent with axios...
Here is live demo on code sandbox: https://codesandbox.io/s/ox7wz9ny15
Instead of writing our own proxy server we're using this one: https://github.com/Rob--W/cors-anywhere
Note: if you want to use this in production I would recommend writing your own proxy server... More info on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
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
I have a URL for a Google Places API that returns the proper json, but when I use fetch, I get this error:
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:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Here's my code
fetch(url, {
mode: 'cors',
headers: {
'Access-Control-Allow-Origin': '*'
}
})
.then(res => res.json())
.then(data => console.log('data', data))
.catch(e => console.log('e', e))
The reason why I don't want to make a proxy server is that I'm using a static site hosting service (and it's just more work to make a proxy server). I figured that if I already have a working url, it should be pretty simple to just fetch the json from that url. This is for a React app (made with create-react-app).