i'm trying to consume deezer api, but idk how to do it.
I already read the documentation, learn how I can get my token, but when I'm trying to request i got this error:
Access to fetch at 'https://api.deezer.com/album/302127' from origin 'null' 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.
how can I solve this?
url: https://api.deezer.com/album/302127
idk the problem with my request.
async function getAlbum() {
try {
const response = await fetch("https://api.deezer.com/album/302127", {
headers: {
"Authorization": "Bearer " + access_token
}
});
const data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
getAlbum();
Related
When I try to connect to Tapkey Web API with Client Credentials, I get the following error message:
"Access to fetch at 'https://login.tapkey.com/connect/token' from origin 'null' 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"
My code is the following:
async function connection() {
try{
let response = await fetch('https://login.tapkey.com/connect/token', {
method:'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
'client_id': 'myclient_id',
'client_secret': 'myclient_secret',
'scope': 'read:owneraccounts read:core:entities write:core:entities write:grants',
'grant_type': 'client_credentials'
})
});
return response;
} catch(err){
return err;
}
};
async function main(){
let result = await connection4();
console.log(result);
};
main();
Have you a solution?
It seems, that you are using a Client Credential Client direct in browser. As the Client Secret can not be stored secretly there, this should not be done. Therefore it is not possible to configure CORS for these clients.
For browser authentication "Authentication Code Flow with PKCE" should be used. For these clients the CORS can be configured.
async function fetching() {
// const apiUrl = "https://www.fishwatch.gov/api/species"
const response = await fetch("https://www.fishwatch.gov/api/species")
const data = await response.json()
console.log(data)
}
fetching()
i am trying to get the json from the above API url, however, i am getting the This is the image of error.
Access to fetch at 'https://www.fishwatch.gov/api/species' from origin 'http://127.0.0.1:5500' 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 want to GET JSON from the endpoint https://api.brawlstars.com/v1/brawlers.
(https://api.brawlstars.com/v1/brawlers?Authorization="Bearer%20[My API Key]")
Here's my Code:
let url = 'https://api.brawlstars.com/v1/brawlers'
fetch(url, {
method: "GET",
headers: {
"Authorization": "Bearer **USER'S API KEY GOES HERE**"
}
}).then((response) => {
let json = response.json();
console.log(json);
}).catch((err) => {
console.error(err)
});
This is the output (error):
Access to fetch at 'https://api.brawlstars.com/v1/brawlers' from origin 'http://127.0.0.1:8887' 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.
sketch.js:3 GET https://api.brawlstars.com/v1/brawlers net::ERR_FAILED
127.0.0.1/:1 Uncaught (in promise) TypeError: Failed to fetch
What am I missing?
In your header, you need to enable CORS like CBroe said :
headers.append('Access-Control-Allow-Origin', 'http://127.0.0.1:8887');
headers.append('Access-Control-Allow-Credentials', 'true');
Edit :
The server (that the POST request is sent to) needs to include the Access-Control-Allow-Headers header (etc) in its response. Putting them in your request from the client has no effect.
This is because it is up to the server to specify that it accepts cross-origin requests (and that it permits the Content-Type request header, and so on) – the client cannot decide for itself that a given server should allow CORS.
I use the following code to request the file:
function getData(imageEndpoint) {
return fetch(imageEndpoint, {
mode: 'cors'
})
.then(response => {
console.log(response);
})
.then(data => {
if (!('caches' in window)) {
return caches.open(cacheName)
.then(cache => {
return cache.put(imageEndpoint, data);
});
}
return data;
})
.catch(e => {
console.log('Request issue, ', e);
});
}
Which outputs in following error message:
Failed to load http://localhost:7000/image.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' 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.
P.S The server works on :8000
When I add cors header
return fetch(imageEndpoint, {
mode: 'cors',
headers: {
'Access-Control-Allow-Origin': '*'
}
})
The following error is beeing thrown:
http://localhost:7000/image.jpg 405 (Method Not Allowed)
index.html:1 Failed to load http://localhost:7000/image.jpg: 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:8080' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Can you please suggest how the request should be setup in order succesfully receive the file?
you need to have the header Access-Control-Allow-Origin: URL Here or Access-Control-Allow-Origin: * on both the OPTIONS response and the POST response. You should include the header Access-Control-Allow-Credentials: true on the POST response as well.
Your OPTIONS response should also include the header Access-Control-Allow-Headers: origin, content-type, accept to match the requested header.
I'm using fetch API to get data from other APIs this is my code:
var result = fetch(ip, {
method: 'get',
}).then(response => response.json())
.then(data => {
country = data.country_name;
let lat = data.latitude;
let lon = data.longitude;
//fetch weather api with the user country
return fetch(`https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/${lat},${lon}`);
})
.then(response => response.json())
.then(data => {
// access the data of the weather api
console.log(JSON.stringify(data))
})
.catch(error => console.log('Request failed', error));
but I face error in console:
Fetch API cannot load https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/52.3824,4.8995. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' 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.
I set headers for the second fetch:
return fetch(`https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/${lat},${lon}`, {
mode: 'no-cors',
header: {
'Access-Control-Allow-Origin':'*',
}
});
error will gone but console.log(JSON.stringify(data)) do not log anything in console and the fetch not return any value.
what is the problem with my code?
The problem is not in your JavaScript code, it is in the API, the server doesn't support cross origin request, if you are the owner of this API you have to add 'Access-Control-Allow-Origin' header to the response with the allowed origins (* to allow from any origin).
in some cases jsonp request may work.
Note: this problem happen only when the request is generated from the browser
The issue will not present when "no-cors" argument is used after the url
fetch(url, {mode: "no-cors"})