不存在“Access-Control-Allow-Origin”，Origin 'null' 不允许访问 - Passport-SteamStrategy，节点

Posted 2023-03-04

【中文标题】不存在“Access-Control-Allow-Origin”，Origin \'null\' 不允许访问 - Passport-SteamStrategy，节点

【英文标题】：No 'Access-Control-Allow-Origin' is present, Origin 'null' not allowed access - Passport-SteamStrategy, Node不存在“Access-Control-Allow-Origin”，Origin 'null' 不允许访问 - Passport-SteamStrategy，节点

【发布时间】：2017-08-08 06:48:12

【问题描述】：

我有一个使用 Passport Steam 策略的网站。我的服务器（带有 Express 的节点）当前在 localhost:3000 上运行，而我的前端在 localhost:8080 上运行。我一直遇到跨域问题，只有在尝试通过 Steam 进行授权时。我的请求是通过 Axios 提出的，我正在使用 CORS。我花了几个小时在谷歌上搜索并尝试了各种方法，但我似乎无法让它发挥作用。

这是我得到的错误：

XMLHttpRequest 无法加载 https://steamcommunity.com/openid/login?openid.mode=checkid_setup&openid.ns…3000%2Fsteam%2Fauth%2Freturn&openid.realm=http%3A%2F%2Flocalhost%3A3000%2F。 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许访问 Origin 'null'。

这里是从前端调用路由的地方：

    linkSteam()
        api('http://localhost:3000/steam/auth')
            .then(res => 
                console.log(res);
                state.user = res.data.user;
            )
    

这是我在前端的 axios 配置。

let api = axios.create(
  baseURL: 'http://localhost:3000/api/',
  timeout: 3000,
  withCredentials: true
)

我的 CORS 设置如下

var whitelist = ['http://localhost:8080', 'https://steamcommunity.com', 'http://localhost:3000', 'null'];
// I added null here as someone said that it worked as their origin displayed null like mine does
var corsOptions = 
  origin: function (origin, callback) 
    var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
    callback(null, originIsWhitelisted);
  ,
  credentials: true
;

然后我将我的 CORS 导入到我的主文件中并按如下方式使用它

app.use(cors(corsOptions))
app.use('*', cors(corsOptions))

我一直看到您可以设置访问控制允许凭据等，并且这样做了

app.use(function (req, res, next) 
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
  if ('OPTIONS' == req.method) 
     res.send(200);
    else 
     next();
   
);

这没有帮助。我尝试分解调用 /steam/auth 并运行 console.log(req.headers.origin) 并返回我正确的 URL 的原始函数，但随后错误仍然报告 Origin 为空。如果我将 Access-Control-Allow-Origin' 设置为 '*'，我会得到一个稍微不同的错误，我必须提供凭据，因此不允许使用 Origin 'localhost:8080'。

这是我的 /steam/auth 路线。

router.get('/steam/auth',
  passport.authenticate('steam', 
    failureRedirect: '/'
  ),
  function (req, res) 
    res.redirect('/');
  );

如果我单击无法加载的 URL 然后登录 Steam，这确实有效。然后它会将我重定向回我的网站，而我的 Steam 个人资料信息保持不变。错误在于尝试将初始重定向返回到 Steam 以便登录。我也尝试在 res.redirect 到他们的直接 URL 中执行此操作，但我得到了同样的错误。

提前感谢您的帮助！如果我遗漏了重要信息，请告诉我。我已尝试将所有内容都包含在内，但如果我遗漏了某些内容，我不会感到惊讶。

【参考方案1】：

如果问题中的错误消息是浏览器报告的实际消息，那是因为您的客户端代码正试图向https://steamcommunity.com/openid/login 发送请求。

因此，无论您对localhost:3000 上的 Node 服务器进行什么配置更改，都不会改变任何东西。相反，您似乎需要弄清楚您的客户端代码将请求发送到 https://steamcommunity.com/openid/login 的位置以及原因。

对https://steamcommunity.com/openid/login 的请求失败的原因是服务器在其响应中没有包含Access-Control-Allow-Origin 响应标头。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有更多详细信息。

因此，由于您无法更改服务器的行为，因此您的浏览器将继续运行，因此只要缺少 Access-Control-Allow-Origin 标头，您的代码就会阻止您的代码获取响应。

我不知道 Steam 是如何处理授权的，但也许您需要通过现有的 Node 后端以某种方式向 Steam 发出授权请求，或者使用例如https://github.com/Rob--W/cors-anywhere/ 设置您自己的 CORS 代理，并通过它将您的客户端授权请求代理到 Steam。

【讨论】：

谢谢！这就说得通了。我最终直接链接到我的服务器的路由，这很有效。感觉有点奇怪，因为 res.redirect 不应该以这种方式使用，但目前它是一种解决方法。

很高兴听到您至少没有失败