0

Tengo una ruta en mi backned que lo unico que hace es redireccionarme a un formulario de spotify asi:

    const ctrl = {}
    ctrl.authentication = (req, res) => {
        const my_client_id = 'b88799f29a3a473fa100004e82650e7d';
        var scopes = 'user-read-private user-read-email';
        res.redirect('https://accounts.spotify.com/authorize' +
          '?response_type=code' +
          '&client_id=' + my_client_id +
          (scopes ? '&scope=' + encodeURIComponent(scopes) : '') +
          '&redirect_uri=' + encodeURIComponent('http://localhost:4000/home'));
    }

module.exports = ctrl;


const express = require('express');
const router = express.Router();
const home = require('../controllers/home')


module.exports  = (app) => {
    
    router.get('/')
    router.get('/authentication', home.authentication)
    

    app.use(router);
}

Ahoa desde mi front con react quiero consultar esa ruta para que se me muestre ese form asi:

import {React, useEffect} from 'react'
import {Link} from 'react-router-dom';

export default function WellcomeMessage() {
    useEffect(() => {
        getAUthenticationForm();
    })

    const getAUthenticationForm = async() => {
        await fetch ('http://localhost:4000/authentication')
    }
    return (
        <div class="row mt-5">
            <div class="col-12 d-flex justify-content-center">
                <div className="card w-25">
                    <div className="card-body p-5">
                        <h2 className="card-title text-center mb-4">Spotify Music is here</h2>
                        <p className="card-text text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus lorem nec quam lobortis efficitur. Proin porttitor, urna sit amet sagittis tincidunt, ipsum nulla pretium ante, ac pretium mi tortor vitae elit. Nam bibendum efficitur nibh, ac vulputate urna pretium at. Nam iaculis, eros eu aliquet dapibus</p>
                        <button className = "btn btn-primary w-100 mt-3">
                            Wannas see more
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}

hasta ahora estoy comenzando con react, entonces estoy muy confundido, no se si ahi si se usa fetch, o no porque en si la funcion del backend solo redirecciona, asi como lo tengo muestra localhost 3000 ha sid bloqueado por cors plicy.

Gracias por la ayuda

1 respuesta 1

1

Prueba utilizando el modulo cors de npm que permitirá a tu backend recibir solicitudes de otros orígenes y demás configuraciones que de seguro requerirás.

const cors = require('cors')

const app = express()
app.use(cors())
4
  • lo pude solucionar agregando app.use(cors({origin: true})) pero no me redirecciona a donde necesito Commented el 21 ene. 2021 a las 21:16
  • fetch es para hacer llamada al API y obtener datos, para redireccionar tienes que usar react-router-dom, por medio de useHistory o useLocation
    – nashvent
    Commented el 21 ene. 2021 a las 21:36
  • Hola Pero la función que redirecciona esta en bakc como se haría en ese caso, solo redirecciono a localhost:4000/authentication Commented el 21 ene. 2021 a las 21:37
  • El back como lo estas usando no redirecciona, solo sirve datos. Si deseas redireccionar tienes que usar react-router-dom. Tambien puede usar despues de la llamada a fetch usar window.location.href='direccion' pero seria mala practica.
    – nashvent
    Commented el 21 ene. 2021 a las 21:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.