Tengo una aplicación ReactJS ejecutándose en un servidor NodeJS con Express que utilicé porque necesitaba sincronizar mis enrutadores delantero y trasero. También estoy usando una API de Go usando Chi que funciona bien (he hecho pruebas con el cartero y realmente funciona). Para enviar solicitudes a mi Go API desde ReactJS uso Axios pero tengo un error en mi consola:
El acceso a XMLHttpRequest en 'http://localhost:8080/api/connection/getToken' desde el origen 'http://localhost:3000' ha sido bloqueado por la política de CORS: la respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: No El encabezado 'Access-Control-Allow-Origin' está presente en el recurso solicitado.
Pero ya hice algunos cambios tanto en mi solicitud de Axios como en mi código API de Golang.
Aquí está mi solicitud de ReactJS Axios:
axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded'; axios.get('http://localhost:8080/api/connection/getToken', { headers: { 'Access-Control-Allow-Origin': true, code: code, } }).then(res => console.log(res));Aquí está mi código Go:
func connectInit(w http.ResponseWriter, r *http.Request) { w.Header().Set("Access-Control-Allow-Origin", "*") if r.Header.Values("code") != nil { code := r.Header.Get("code") clientToken, err := getClientToken(code) if err != nil { fmt.Fprint(w, err.Error()) } fmt.Fprint(w, clientToken) } }Aquí está mi enrutador Chi en Go:
func ConnexionRoutes() *chi.Mux { router := chi.NewRouter() router.Get("/getToken", connectInit) return router }Gracias !
el problema que tienes es que el go server se sirve en el origen http://localhost:8080
mientras que la aplicación web local de reacción ciertamente se sirve en el origen http://localhost:3000 (esto es lo que tengo la mayor parte del tiempo)
Según https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin , el origen (en el sentido del navegador) es:
<esquema> "://" <nombre de host> [ ":" <puerto> ]
el navegador detecta que la aplicación web JS reaccionar está tratando de acceder a otro origen (puerto 8080) que no tiene un encabezado específico y, por lo tanto, lo bloquea.
Una solución a esto es configurar la API go para que devuelva el encabezado apropiado Access-Control-Allow-Origin: * .
Aún mejor, para chi, personalmente uso:
import "github.com/go-chi/cors" router := chi.NewRouter() router.Use(cors.AllowAll().Handler)Más sobre CORS aquí: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
React ahora propone el campo proxy en el archivo package.json para recopilar y redirigir sus solicitudes de aplicaciones web:
"proxy": "http://localhost:8080"Debería hacer el truco sin cors en absoluto.
Consulte https://create-react-app.dev/docs/proxying-api-requests-in-development/