Soy principiante en el programa de reacción. Solo estoy creando una pequeña aplicación web usando Laravel y React. De repente recibí un error, no sé qué hice mal. Si alguien me ayuda, estaré encantado con usted. Debajo del mensaje de error:
El acceso a XMLHttpRequest en http://127.0.0.1:8000/sanctum/csrf-cookie desde el origen http://localhost:3000 ha sido bloqueado por la política de CORS: el encabezado 'Access-Control-Allow-Origin' tiene un valor http ://localhost:4200 que no es igual al origen proporcionado.
Estoy tratando de esta manera:
import React from 'react'; import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'; import MasterLayout from './layouts/admin/MasterLayout'; import Home from './components/frontend/Home'; import Login from './components/frontend/auth/Login'; import Register from './components/frontend/auth/Register'; import axios from 'axios'; axios.defaults.baseURL = "http://127.0.0.1:8000"; axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.headers.post['Accept'] = 'application/json'; axios.defaults.withCredentials = true; function App() { return ( <div className="App"> <Router> <Switch> {/* Homepage */} <Route exact path="/" component={Home}/> {/* Auth Pages */} <Route path="/login" component={Login}/> <Route path="/register" component={Register}/> <Route path="/admin" name="Admin" render={(props) => <MasterLayout {...props} />} /> </Switch> </Router> </div> ); } export default App;CORS es un mecanismo de navegador que pregunta al servidor web si está dispuesto a aceptar solicitudes de un origen específico. El origen es su nombre de host + puerto, lo que significa que localhost:3000 , localhost:4200 y localhost:8000 son orígenes diferentes.
Puede configurar el encabezado Access-Control-Allow-Origin en su backend para aceptar solicitudes de 'localhost: 3000', o puede iniciar su aplicación de reacción en el puerto :4200 , ya que su backend ya lo acepta, o puede use un proxy que hará solicitudes al backend desde el lado del servidor.
En el entorno de producción, generalmente tiene un backend y un frontend trabajando en el mismo origen, por lo que el proxy es una buena manera de resolver los problemas de CORS durante el desarrollo. También puede configurar algún proxy inverso, como nginx, para que su backend y frontend estén en el mismo origen.