No está presente ‘Access-Control-Allow-Origin’, Origin ‘null’ no permitido el acceso – Passport-SteamStrategy, Node

Tengo un sitio que utiliza Passport Steam Strategy. Mi servidor (Nodo con Express) se está ejecutando actualmente en localhost: 3000, mientras que mi interfaz se está ejecutando en localhost: 8080. Sigo encontrando un problema de origen cruzado, solo cuando bash autorizar a través de Steam. Mis solicitudes se hacen a través de Axios y estoy usando CORS. He pasado horas buscando en Google y probando varias cosas, pero parece que no consigo que funcione.

Este es el error que recibo:

XMLHttpRequest no puede cargar https://steamcommunity.com/openid/login?openid.mode=checkid_setup&openid.ns… 3000% 2Fsteam% 2Fauth% 2Freturn & openid.realm = http% 3A% 2Flocalhost% 3A3000% 2F. No hay ningún encabezado ‘Access-Control-Allow-Origin’ presente en el recurso solicitado. Por tanto, no se permite el acceso al origen ‘nulo’.

Aquí es donde se llama la ruta desde el extremo delantero:

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

Y aquí está mi configuración de axios en la parte delantera.

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

Mi CORS está configurado de la siguiente manera

 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 }; 

Luego importo mi CORS a mi archivo principal y lo uso de la siguiente manera

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

Seguí viendo que puedes configurar tus credenciales de permiso de control de acceso, etc., y así lo hice.

 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(); } }); 

Esto no ayudó. He intentado descomponer mi función original donde se llama / steam / auth y ejecutar una console.log (req.headers.origin) y devuelve mi URL correcta, pero el error aún informa que el origen es nulo. Si configuro mi Access-Control-Allow-Origin ‘en’ * ‘, recibo un error ligeramente diferente de que debo proporcionar las credenciales, y que el Origin’ localhost: 8080 ‘no está permitido.

Aquí está mi ruta / steam / auth.

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

Y esto funciona si hago clic en la URL que no se puede cargar y luego inicio sesión en Steam. Luego me redireccionará a mi sitio con la información de mi perfil de Steam intacta. El error está en intentar obtener la redirección inicial a Steam para iniciar sesión. También he intentado hacer esto en una redirección directa a su URL directa y recibo el mismo error.

¡Gracias de antemano por cualquier ayuda! Y déjame saber si me falta información vital. He intentado incluir todo, pero no me sorprendería si me perdiera algo.

Si el mensaje de error en la pregunta es el mensaje real que informa el navegador, es porque el código del lado del cliente está intentando enviar una solicitud a https://steamcommunity.com/openid/login .

Entonces, dado que no importa qué cambios de configuración realice en su servidor Node en localhost:3000 , eso no cambiará nada. En cambio, parece que usted necesita saber dónde está enviando una solicitud su código del lado del cliente a https://steamcommunity.com/openid/login y por qué.

Y la razón por la que falla la solicitud a https://steamcommunity.com/openid/login es que el servidor no incluye el encabezado de respuesta Access-Control-Allow-Origin en su respuesta.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS tiene más detalles.

Por lo tanto, debido a que no puede cambiar el comportamiento del servidor, su navegador continuará, por lo tanto, bloqueará el código para que no obtenga la respuesta siempre que no tenga el encabezado Access-Control-Allow-Origin .

No sé cómo Steam maneja la autorización, pero tal vez necesite hacer la solicitud de autorización para Steam a través de su backend Node existente o configurar su propio proxy CORS usando, por ejemplo, https://github.com / Rob – W / cors-anywhere / , y envía su solicitud de autorización del lado del cliente a Steam a través de él.