2
respostas

[Dúvida] Estou tendo problemas com Proxy no react app como resolver?

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`

2 respostas

Bom dia!

Você está usando o Live Server? se usar ele geralmente some esse erro de cors!

Não estou usando o live server a extensão do vs code. Não sei se o problema é do sistema, Meu sistema é o windows 11. Alguma coisa de script abilitado pode prejudicar na hora da execução?