Access to XMLHttpRequest at 'http://localhost:8000/api/v2/restaurantes/1'' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this error FormRestaurante.tsx:11 AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}code: "ERR_NETWORK"config: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:72723:14)\n at Axios.request (http://localhost:3000/static/js/bundle.js:73174:41)"[[Prototype]]: Error FormRestaurante.tsx:11
GET http://localhost:8000/api/v2/restaurantes/1' net::ERR_FAILED
dispatchXhrRequest @ xhr.js:188
xhr @ xhr.js:15
dispatchRequest @ dispatchRequest.js:51
_request @ Axios.js:173
request @ Axios.js:40
Axios. @ Axios.js:199
wrap @ bind.js:5
(anonymous) @ FormRestaurante.tsx:11
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
Show 19 more frames
Show lessUnderstand this error
import { Button, TextField } from "@mui/material" import axios from "axios" import { useEffect, useState } from "react" import { useParams } from "react-router-dom" import IRestaurante from "../../interfaces/IRestaurante" const FormularioRestaurante = () => { const parametros = useParams(); const [nomeRestaurante, setNomeRestaurante] = useState(''); useEffect(() => { if(parametros.id){ axios.get<IRestaurante>(
http://localhost:8000/api/v2/restaurantes/${parametros.id}` )
.then(res => setNomeRestaurante(res.data.nome)).catch(data => console.log(data));
}
},[parametros])
const aoSubmeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
evento.preventDefault()
axios.post('http://localhost:8000/api/v2/restaurantes/', {
nome: nomeRestaurante
})
.then(() => {
alert("Restaurante cadastrado com sucesso!")
})
}
return (
<form onSubmit={aoSubmeterForm}>
<TextField value={nomeRestaurante}
onChange={evento => setNomeRestaurante(evento.target.value)}
label="Nome do Restaurante"
variant="standard" />
<Button type="submit" variant="outlined">Salvar</Button>
</form>)
}
export default FormularioRestaurante`