Блог

Я просматривал ЭТО и не могу найти решение.

У меня есть проект React в папке «клиент» на порту 3000 и приложение Express в папке «сервер» на порту 5000. Я инициирую оба проекта с помощью docker.

У меня есть компонент входа в систему (login.component.js):

 import AuthService from '../services/auth.service';

class Login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            username: "", 
            password: "",
            loading: false
        };
    }

    handleUsernameChange = (e) => {
        this.setState({
            username: e.target.value
        })
    }

    handlePasswordChange = (e) => {
        this.setState({
            password: e.target.value
        })
    }

    handleLogin = (e) => {
        e.preventDefault();
        const { history } = this.props;

        AuthService.userLogin(this.state.username, this.state.password)
        .then(() => {
            history.push("/user");
            window.location.reload();
        });
    }

    render() {
        return (
            <div className="login-app">
                <form onSubmit={this.handleLogin} className="login-form">
                    <div className="form-group">
                    <label htmlFor="email">Email</label>
                    <input 
                        type="text" 
                        name="email" 
                        className="form-control"
                        value={this.state.username}
                        onChange={this.handleUsernameChange} />
                    </div>
                   
                    <div className="form-group">
                    <label htmlFor="password">Password</label>
                    <input 
                        type="password" 
                        name="password" 
                        className="form-control" 
                        value={this.state.password}
                        onChange={this.handlePasswordChange} />
                    </div>
                    <button type="submit" className="btn btn-primary w-100">Login</button>
                </form>
            </div>
        )
    }
}

export default Login;
 

И служебный файл (auth.service.js):

 import Cookies from "universal-cookie";
import axios from "axios";
require('dotenv').config();

const cookies = new Cookies();

class AuthService {
    userLogin(username, password) {
        return axios.post(process.env.REACT_APP_SERVICE   '/login', 
        { 
            username: username, 
            password: password

        }).then((res) => {
            if(res.data.access_token) {
                
                cookies.set("userToken", JSON.stringify(res.data.access_token), { path: "/" });
            }
            return res.data;
        });
    }
}

export default new AuthService();
 

где process.env.REACT_APP_SERVICE=http://локальный хост:5000. В моей папке «сервер» у меня есть app.js (первые 30 строк):

 var createError = require('http-errors');
var express = require('express');
var axios = require('axios');
var cors = require('cors');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var authRouter = require('./routes/auth');
var userRouter = require('./routes/users');

var app = express();
app.use(cors());

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// routes
app.use('/', indexRouter);
app.use('/login', authRouter);
app.use('/user', userRouter);
 

The routes and controllers send an axios request to my API url, where it does return a token (200 status) that I can use to grab user data. However, from my Login component I receive an error after pressing submit:

 Unhandled Rejection (Error): A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.
▶ 23 stack frames were collapsed.
(anonymous function)
src/app/src/components/login.component.js:36
  33 | 
  34 |     AuthService.userLogin(this.state.username, this.state.password)
  35 |     .then(() => {
> 36 |         history.push("/user");
  37 |         window.location.reload();
  38 |     });
  39 | }
 

Я новый разработчик. Мой index.js файл включает в себя . Я не могу понять, почему это происходит. Печать из пользовательского интерфейса React возвращает действительный токен, поэтому я знаю, что он взаимодействует с серверной частью, но, похоже, проблема в пользовательском интерфейсе.

Я попытался использовать «Перенаправление» из документации react-router-dom, чтобы просто посмотреть, неправильно ли я использую «history.push ()», но теперь я запутался, если это проблема CORS (консоль также говорит, что в обещании не найдено). Любая помощь будет признательна.