Agregué proxy en package.json y funcionó muy bien, pero después de que npm ejecuta la compilación, el problema de CORS ha resurgido nuevamente, ¿alguien sabe cómo lidiar con el problema de CORS después de que npm ejecuta la compilación en React?
He intentado agregar encabezados en la solicitud de axios usando varios métodos. Sin embargo, no pude agregar 'Access-Control-Allow-Origin':'*' en la solicitud de axios. Mi código es el siguiente:
paquete.json
"proxy": { "*":{ "target" : "http://myurl"} }GetData.js
axios.defaults.baseURL = 'http://myurl'; axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8'; axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; axios.get(serviceUrl, onSuccess, onFailure) .then(resp => { let result = resp.data; onSuccess(result); }) .catch(error => { if(onFailure) { return onFailure(error); } }) }Nota: se ha habilitado desde el lado del servidor, todavía no funciona. Actualmente, no puedo cambiar el código desde el lado del servidor, mi trabajo se limita solo al lado del cliente.
su servidor debe habilitar las solicitudes de origen cruzado, no el cliente. Para ello, puedes consultar esta bonita página con implementaciones y configuraciones para múltiples plataformas.
Puede ser útil para alguien:
Estoy enviando datos desde una aplicación de react a un servidor golang .
Una vez que cambié esto, w.Header().Set("Access-Control-Allow-Origin", "*") , se solucionó el error.
Función de envío de formulario de reacción:
async handleSubmit(e) { e.preventDefault(); const headers = { 'Content-Type': 'text/plain' }; await axios.post( 'http://localhost:3001/login', { user_name: this.state.user_name, password: this.state.password, }, {headers} ).then(response => { console.log("Success ========>", response); }) .catch(error => { console.log("Error ========>", error); } ) }Ir servidor tiene enrutador,
func main() { router := mux.NewRouter() router.HandleFunc("/login", Login.Login).Methods("POST") log.Fatal(http.ListenAndServe(":3001", router)) }Iniciar sesión.ir,
func Login(w http.ResponseWriter, r *http.Request) { var user = Models.User{} data, err := ioutil.ReadAll(r.Body) if err == nil { err := json.Unmarshal(data, &user) if err == nil { user = Postgres.GetUser(user.UserName, user.Password) w.Header().Set("Access-Control-Allow-Origin", "*") json.NewEncoder(w).Encode(user) } } }Solo noto mi solución para alguien que podría llegar aquí buscando en Google. Resolví mi problema de CORS (al llamar a una API externa desde mi interfaz de usuario en el navegador) configurando withCredentials en false en mi llamada axios :
axios({ method: 'get', url: `https://api.someurl.com/subject/v2/resource/somevalue`, withCredentials: false, params: { access_token: SECRET_TOKEN, }, }); En este caso, la seguridad del extremo de la API externa se basa en access_token .