Fetch API throws an error while fetching from steam web api - javascript

I want to fetch a information from steam web api's 'GetFriendsList' endpoint.When I am using fetch to do this from my front end javascript file.Im getting an error.
Access to fetch at 'https://api.steampowered.com/ISteamUser/GetFriendList/v1/?key=<apikey>&steamid=76561198364464404' from origin 'http://localhost:3001' 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 went to mdn and saw I must use
Access-Control-Allow-Origin: http://localhost:3000
Vary: Origin
in the fetch option.I did add these and no difference same error,I also added
mode: 'no-cors'
It worked this time but no response was returned from the steam web api.
I am really new to this.This is the first time using fetch.Any help regarding this is appriciated.THANK YOU.

Related

Fetch request being blocked by cors policy when GET request is sending a specific value

I have a website which is using the Vue.js framework which connects to a django api.
The django api has the following settings:
MIDDLEWARE = [
..
"corsheaders.middleware.CorsMiddleware",
..
]
CORS_ALLOWED_ORIGINS = ["http://localhost:3000", 'http://127.0.0.1:3000']
The following request works fine:
fetch("http://127.0.0.1:8000/select?user_sent=1")
However this request causes an error:
fetch("http://127.0.0.1:8000/select?user_sent=2")
The error caused by the second request:
Access to fetch at 'http://127.0.0.1:8000/select?user_sent=2' 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.
The weird thing is that the second request used to work before. I made a change to my django urls and changed the name of the select path but then changed it back to select and now it is no longer working.
I tried changing the name of the select path to /sele and when I do that the request will work fine on the new path. However, I would like to know why it is not working on the /select path.

JavaScript fetch request issue : C-CORN [duplicate]

This question already has answers here:
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
(13 answers)
Closed 11 months ago.
I'm trying to run JavaScript as a snippet starting from one domain and do fetch request to a google search and I keep getting this error:
'Access to fetch at 'https://www.google.com/' from origin 'https://www.somewebsite.org' 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 many ways to fix it by passing headers and it did work. Not sure at this point what else I can do.`
It is the server (https://www.google.com/ in this case) of the requested resource that is responsible for and controls the CORS headers necessary. In order for you to be able to access the resource from your origin domain, the CORS policy that google serves will have to allow your website to request it.

Evernote authentification with developer token failed

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.

How to fix the "set the request's mode to 'no-cors'" error?

I am currently using yahoo weather api to fetch weather data. I am getting below error. Please help.
Access to fetch at 'https://weather-ydn-yql.media.yahoo.com/forecastrss?location=sunnyvale,ca&format=json' 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.
I have tried to do google, but none of solution worked for me
You can set the request mode to 'no-cors' like so:
fetch(url, {
mode: "no-cors",
...
})
But, as goto1 described in the comment below, it will usually not be the solution you are looking for (see his comment on how to properly work with CORS).
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
So, First of all you have to change your CORS from browser :
Here is the Link of that , download it and it will install by it self.
visit:https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc?hl=en-US
Name : Moesif Origin & CORS Changer
NOTE: Make sure it turns ON while you running your page.

Where to add Access-Control-Allow-Origin using ReactJS?

When I try fetch data from localhost:5000 (my api is at localhost:8080) i have an error:
Fetch API cannot load http://localhost:5000/users/1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1: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.
I know that i must add header Access-Control-Allow-Origin: * but i don't know where.
I'm using JS+Python (ReactJS and Flask frameworks)
You will have to add in your web server whichever you're using ; provided that you are taking security risk.

Categories