Problème d’access aux contrôles API-Autoriser-l’API Steam

Un peu nouveau dans la programmation Web et un peu confus à ce sujet. J’ai un serveur Web express de base node.js servant un site Web. Je souhaite confier un identifiant de jeu à une fonction et lui demander de saisir des informations sur les réalisations de Steam à l’aide de son API Web qui devrait être prise en charge à l’aide de l’appel suivant de l’API REST:

https://developer.valvesoftware.com/wiki/Steam_Web_API#GetGlobalAchievementPercentagesForApp_.28v0002.29

Je suis en train de servir un fichier de script. J’essaie de faire une demande dans un fichier côté client comme tel.

function GetSteamGameAchievements(appid) { var request = new XMLHttpRequest(); request.addEventListener('load',function(){ console.log(JSON.ssortingngify(this.responseText)); }); request.open("GET","http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid="+ appid + "&format=json",true); request.send(null); } 

Je reçois l’erreur suivante

XMLHttpRequest ne peut pas charger http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid=440&format=json . Aucun en-tête ‘Access-Control-Allow-Origin’ n’est présent sur la ressource demandée. L’origine ‘ http: // localhost: 3000 ‘ n’est donc pas autorisée.

J’ai lu un peu au sujet de l’erreur, mais cela semble nécessiter des modifications du code côté serveur ou quelque chose du genre. Bien que tout le code côté serveur fasse quelque chose comme:

 // Add headers app.use(function (req, res, next) { // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', 'http://api.steampowered.com'); // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // Request headers you wish to allow res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // Set to true if you need the website to include cookies in the requests sent // to the API (eg in case you use sessions) res.setHeader('Access-Control-Allow-Credentials', true); // Pass to next layer of middleware next(); }); 

L’utilisation de l’API Open Weather, qui est la seule autre API REST tierce avec laquelle j’ai travaillé, ressemble à du code original, de sorte que je ne sais pas pourquoi l’API Steam ne fonctionne pas correctement. En utilisant Postman, les chaînes de requête que je soumets sont acceptables, mais il y a un problème avec les titres lorsque je le fais dans mon javascript côté client … mais pas avec Open Weather API … je ne sais pas pourquoi cela fonctionne pour un seul. mais pas l’autre. Toute aide serait très appréciée, j’ai passé en revue des sujets similaires, mais je pense que ma noblesse me rend difficile la tâche de comprendre où j’ai tort et où il faut remédier exactement.

J’ai lu un peu au sujet de l’erreur, mais cela semble nécessiter des modifications du code côté serveur ou quelque chose du genre.

Oui – par le service à partir duquel vous souhaitez lire les données. c’est à dire par Steam.

Vous ne pouvez pas vous autoriser à lire des données provenant de sites d’autres personnes à l’aide du navigateur de vos visiteurs.

Étant donné que vous ne pouvez pas modifier les serveurs de Steam, vous devez récupérer les données de Steam à l’aide de votre serveur plutôt que des navigateurs des visiteurs.

Vous pouvez facilement “corser” les modules. utiliser cette commande

 npm install cors --save. 

et ajoutez ces lignes dans votre app.js

 var cors = require('cors'); app.use(cors()); 

Vous n’avez pas besoin de salir votre code. C’est une méthode plus propre.

enlève ça

 app.use(function (req, res, next) { // Website you wish to allow to connect res.setHeader('Access-Control-Allow-Origin', 'http://api.steampowered.com'); // Request methods you wish to allow res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // Request headers you wish to allow res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // Set to true if you need the website to include cookies in the requests sent // to the API (eg in case you use sessions) res.setHeader('Access-Control-Allow-Credentials', true); // Pass to next layer of middleware next(); });