不存在“ Access-Control-Allow-Origin”，不允许原始“ null”访问-Passport-SteamStrategy，节点 [英] No 'Access-Control-Allow-Origin' is present, Origin 'null' not allowed access - Passport-SteamStrategy, Node
问题描述
我有一个使用Passport Steam策略的网站。我的服务器（带有Express的节点）当前在localhost：3000上运行，而我的前端在localhost：8080上运行。仅在尝试通过Steam授权时，我一直遇到跨域问题。我的请求是通过Axios发出的，而我正在使用CORS。我花了几个小时在Google上搜寻并尝试了各种方法，但似乎无法正常工作。
I have a site that is using Passport Steam Strategy. My server (Node with Express) is currently running on localhost:3000 while my front end is running on localhost:8080. I keep running into a cross-origin issue, only when attempting to authorize through Steam. My requests are made through Axios and I am using CORS. I've spent hours Googling and trying various things but I can't seem to get it to work.
这是我得到的错误：
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标头。因此，不允许访问原始空。
XMLHttpRequest cannot load https://steamcommunity.com/openid/login?openid.mode=checkid_setup&openid.ns…3000%2Fsteam%2Fauth%2Freturn&openid.realm=http%3A%2F%2Flocalhost%3A3000%2F. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
此处是从前端调用路由的地方：
Here is where the route is called from the front end:
linkSteam(){
api('http://localhost:3000/steam/auth')
.then(res => {
console.log(res);
state.user = res.data.user;
})
}
这是前端的axios配置。
And here is my axios configuration on the front end.
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导入到主文件中，并按以下方式使用它
I then import my CORS into my main file and use it as follows
app.use(cors(corsOptions))
app.use('*', cors(corsOptions))
我一直看到您可以设置Access-Control-Allow-Credentials等等，
I kept seeing that you can set your Access-Control-Allow-Credentials, etc and did so
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'设置为'*'，则会收到一个略有不同的错误，我必须提供凭据，因此不允许源'localhost：8080'。
This didn't help. I've tried breaking down my original function where /steam/auth is called and running a console.log(req.headers.origin) and spits back my correct URL, but then the error still reports that the Origin is null. If I set my Access-Control-Allow-Origin' to '*', I get a slightly different error that I must provide credentials, and that the Origin 'localhost:8080' is therefore not allowed.
这是我的/ steam / auth路由。
Here's my /steam/auth route.
router.get('/steam/auth',
passport.authenticate('steam', {
failureRedirect: '/'
}),
function (req, res) {
res.redirect('/');
});
如果我单击无法加载的URL，然后登录到Steam，这确实可行。然后它将把我的Steam个人资料信息保持原样重定向到我的网站。错误在于尝试将初始重定向回Steam以便登录。我也尝试过在res.redirect到他们的直接URL上执行此操作，并且遇到相同的错误。
And this does work if I click on the URL that cannot be loaded and then login to Steam. It will then redirect me back to my site with my Steam profile information intact. The error is on attempting to get the initial redirect back to Steam in order to login. I have also tried doing this in a res.redirect to their direct URL and I get the same error.
在此先感谢您的帮助！并且让我知道我是否缺少重要信息。我已尝试包含所有内容，但是如果我错过了某些内容，也不会感到惊讶。
Thanks in advance for any help! And let me know if I'm missing vital information. I've tried to include everything, but I wouldn't be surprise if I missed something.
推荐答案
如果出现错误消息问题是浏览器正在报告的实际消息，这是因为您的客户端代码试图将请求发送到 https://steamcommunity.com/openid/login 。
If the error message in the question is the actual message the browser is reporting, it’s because your client-side code is trying to send a request to https://steamcommunity.com/openid/login.
因此，无论您对 localhost：3000 上的节点服务器进行什么配置更改，都不会要改变任何东西。相反，似乎您需要确定客户端代码将请求发送到 https://steamcommunity.com/openid/login 的位置以及原因。
So given that, no matter what config changes you make to your Node server on localhost:3000, that’s not going to change anything. Instead it seems like you you need to figure out where your client-side code is sending a request to https://steamcommunity.com/openid/login and why.
对 https://steamcommunity.com/openid/login 的请求失败的原因是服务器没有在响应中包含 Access-Control-Allow-Origin 响应标头。
And the reason the request to https://steamcommunity.com/openid/login fails is that server doesn’t include the Access-Control-Allow-Origin response header in its response.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有更多详细信息。
因此，由于您无法更改服务器的行为，因此您的浏览器将继续运行，因此只要缺少它，代码就无法获得响应 Access-Control-Allow-Origin 标头。
So because you can’t change the server’s behaviour, your browser will continue so block your code from getting at the response as long as it lacks the Access-Control-Allow-Origin header.
我不知道Steam如何处理授权，但也许您需要通过现有的Node后端请求向Steam发出授权请求w，或者使用例如 https：// github来设置自己的CORS代理。 com / Rob--W / cors-anywhere / ，并通过它将您的客户端授权请求代理到Steam。
I don’t know how authorization is handled by Steam but maybe you instead need to either make the authorization request to Steam through your existing Node backend somehow, or else set up your own CORS proxy using, e.g., https://github.com/Rob--W/cors-anywhere/, and proxy your client-side authorization request to Steam through it.
这篇关于不存在“ Access-Control-Allow-Origin”，不允许原始“ null”访问-Passport-SteamStrategy，节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
