Steam API 访问控制允许来源问题

Question

对网络编程有点陌生，对此有点困惑。我有一个基本的 express node.js 网络服务器提供一个网站。我想将一个 gameid 传递给一个函数，并让它使用他们的网络 api 从 Steam 中获取成就信息，应该使用以下 REST api 调用支持：

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

我正在提供一个脚本文件，我正在尝试在客户端文件中发出这样的请求。

function GetSteamGameAchievements(appid)
{
   var request = new XMLHttpRequest();

    request.addEventListener('load',function(){

       console.log(JSON.stringify(this.responseText));

    });

    request.open("GET","http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid="+ appid + "&format=json",true);

    request.send(null);
}

我收到以下错误

XMLHttpRequest cannot load http://api.steampowered.com/ISteamUserStats/GetGlobalAchievementPercentagesForApp/v0002/?gameid=440&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我已经阅读了一些有关该错误的信息，但它似乎需要更改服务器端代码或其他内容。尽管所有服务器端代码都做了类似的事情：

// 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 (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);

  // Pass to next layer of middleware
  next();
});

使用 Open Weather API，这是唯一的其他第 3 方 REST api 我已经使用过类似原始代码的东西，所以我不确定为什么 Steam API 工作不正常。使用 Postman，我提交的查询字符串很好，但是当我在我的客户端 javascript 执行时，证券有问题 javascript ... 但不是 Open Weather API ... 我我不确定为什么它适用于一个而不适用于另一个。任何帮助将不胜感激，我已经浏览了一些类似的线程，但我认为我的笨拙让我很难理解我哪里出错了以及需要准确修复的地方。

Answer 1

您可以轻松 'cors' 模块。使用这个命令

npm install cors --save.

并将这些行添加到您的 app.js

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

您不需要获取代码 dirty.This 是一种更简洁的方法。

删除这个

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 (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);

  // Pass to next layer of middleware
  next();
});

Answer 2

I've read a bit about the error, but it seems to require server side code changes or something.

是 — 通过您要从读取数据的服务。即通过 Steam。

您不能允许自己使用访问者的浏览器从其他人的网站读取数据。

由于您无法更改 Steam 的服务器，因此您需要使用您的服务器而不是访问者的浏览器从 Steam 获取数据。

Steam API 访问控制允许来源问题

Steam API Access-Control-Allow-Origin Issue

javascript

node.js

web

xmlhttprequest

steam-web-api