时间戳

首页 > 解决方案 > React 和 Axios 不连接到后端

javascript - React 和 Axios 不连接到后端

问题描述

我的代码不起作用，我正在使用节点和 React，axios 正在尝试与后端连接，但它失败了。

当我尝试在控制台中连接时： firefox 控制台的图像

我的代码是：frontend/pages/login/index.js

import { FiLogIn } from 'react-icons/fi'
import  {Link } from 'react-router-dom'
import api from '../../services/api'
import './styles.css'

export default function Login() {
    const [name, setName] = useState('')
    const [password, setPassword] = useState('')

    async function handleLogin(e) {
        e.preventDefault()

        let data = ({
            name,
            password}
        )
        try {
            let response = await api.post('session', data)
        } catch(err){
            console.log(err)
        }
    }


    return (
        <div className="login-conteiner">
            <header>
                <nav>
                    <div className="navlinks">
                        <Link to="/"><div className="li">Vega</div></Link>
                        <Link to="about.html"><div className="li">Sobre</div></Link>
                    </div>
                </nav>
            </header>
            <main className="login">
                <div className="heading">
                    <span className="blackblock"><h1>Vega Leads</h1></span>
                    <h2>Visualize todos os Leads <br /> da sua Instiuição <br /> e torne em alunos.</h2><br />
                </div>
                    <div>
                        <form className="loginForm" id="form" onSubmit={handleLogin}>
                            <div className="loginItem"><label htmlFor="login">Login </label><input className="formInput" type="text" name="login" id="login" 
                            value={name} 
                            onChange={e => setName(e.target.value)} /></div><br />
                            <div className="loginItem"><label htmlFor="senha">Senha </label><input className="formInput" type="password" name="password" id="password" 
                            value={password}
                            onChange={ e => setPassword(e.target.value) } /></div><br />
                            <button type="submit" className="startButton" id="postForm">Enviar <FiLogIn size={25} color="#11548f" /></button>
                        </form>
                    </div>
            </main>
        </div>
    )}

axios api：前端/服务/api.js


const api = axios.create({
    baseURL: 'http://localhost:3333',
})

export default api

如果您需要更多文件来解决我的问题，请询问我。谢谢

标签： javascriptnode.jsreactjsaxiosnodes

解决方案

我解决了这个问题。

问题出在我的后端索引中（backend/src/index.js）

我忘记了CORS模块。

这是我的代码：

const routes = require('./routes')
const cors = require('cors')

const app = express()
app.use(cors())
app.use(express.json())
app.use(routes)

app.listen(3333)

推荐阅读