настройка cook ie с токеном jwt в клиенте реакции с использованием express бэкэнда - PullRequest
0 голосов
/ 13 января 2020

Я пытаюсь установить повар ie в браузере для аутентификации. При использовании POSTMAN повар ie возвращается без проблем, как и любой другой ответ, который я отправляю. Однако в приложении «Реакция» его не удается получить. Кажется, что он жалуется на CORS, в частности на эту строку кода, установленную на : res.header ("Access-Control-Allow-Origin", "");

У меня есть файл приложения. js, в котором я настраиваю CORS и все мои маршруты, и мои базовые c выборки работают отлично. При попытке установить повара ie в файле маршрута он не может быть выбран. Вот приложение. js файл

//packages
var bodyParser = require ('body-parser')
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');
var mysql = require('mysql');

//routes
const accountRouter = require('./routes/account');

//express app
var app = express();

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

app.use(cors());
app.use(bodyParser.json());
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')));

//use routes
app.use('/account', accountRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// Tells Express to allows data to be sent across different origins
// required by CORS policy
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "localhost:3001");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Вот мой файл маршрута, который проверяет существующее письмо, а затем проверяет пароль. После проверки пароля я генерирую токен и отправляю его как повар ie. Опять же, в POSTMAN это работает нормально.

var express = require('express');
var router = express.Router();
var bcryptjs = require('bcryptjs')
var cookieParser = require('cookie-parser');
var jwt = require('jsonwebtoken');
var pool = require('../database/accountsdb');
const saltRounds = 12;

function authenticate(req,res) {
    //Check for existing email 
    //Create DB Connection
    pool.getConnection(function(err, connection){
        if(err) {
            connection.release();
            res.json({"code": 100, "status": "Error in database connection"});
            return;
        }
        //Variables and SQL 
        let emailSQL ='SELECT intAccountID FROM accountdetails where strEmail = ?';
        let email = req.body.email;
        
        connection.query(emailSQL, email, function(err, result){
            if(!err){
                //check if matching row was found
                if(result.length>0){
                    //Get password
                    let accountID = result[0].intAccountID;
                    let accountSQL = "SELECT strPassword, intAccountID FROM accounts WHERE intAccountID = ?";

                    connection.query(accountSQL, accountID, function(err, result){
                        if(!err){
                            //get password
                            let hashed = result[0].strPassword;
                            //get ID
                            let ID = result[0].intAccountID;
                            //compare passwords
                            bcryptjs.compare(req.body.password, hashed, function(err, result){
                                if(!err){
                                    if(result== true){
                                        let payload = {
                                            check: true,
                                            ID: ID
                                        };
                                        //generate token
                                        let token = jwt.sign(payload, process.env.TOKEN_SECRET, {
                                            expiresIn: 1440 //24 hours
                                        });
                                        
                                        //TESTING EXPIRE
//TESTING EXPIRE
                                        let expiration= 1000;
                                        //return token cookie
                                        
                                        //NEED TO SEND COOKIE !!!!!!!!!!!!!!!!!!!!!
                                        res.cookie('token', token, {
                                            expires: new Date(Date.now() + expiration),
                                            httpOnly: true,
                                        });
                                    }else{
                                        //return failed
                                        res.json({
                                            message: 'Invalid Email or Password'
                                        });
                                    }
                                }else{
                                    res.json({err: err});
                                }
                            })
                        }else{
                            //return error
                            res.json({err:err});
                        }
                    })


                }else{
                    //return failed
                    res.json({
                        message: 'Invalid Email or Password'
                    });
                }  
            }else{
                connection.release();
                res.json({err});
                return;
            }
            connection.release();
        })

            
                
        connection.on('error', function(err){
            res.json({"code": 100, "status": "Error in database connection"});
        })

    })
};


router.post('/authenticate', function(req, res){
    authenticate(req, res);
});

module.exports = router;

Вот компонент реагирования для проверки того, что введено правильное электронное письмо, пароль не пустой и вызов API для отправки данных в express для аутентификации ,

// Dependencies 
import React, {Component} from 'react';
import validator from 'validator';

class Login extends Component{
    constructor(props){
        super(props);
        this.state = {
            email: '',
            password:''
        }

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangeEmail = (event) => {
        this.setState({email: event.target.value});
    }

    handleChangePass = (event) => {
        this.setState({password: event.target.value});
    }

    verifyInput(data){
        //Validate Email
        if(validator.isEmail(data.email) == false){
            return false;
        }
    }

    handleSubmit(event){
        let data = {
            email: this.state.email,
            password: this.state.password
        }

        let isValid= this.verifyInput(data)

        if(isValid == false){
            alert("Please enter a valid email address")
            event.preventDefault();

        }else{
            //api parameters to register user
            const url ='http://localhost:3001/account/authenticate'
            const options = {
                method:'POST',
                headers:{
                    'Accept': 'application/json',
                    'Content-Type': 'application/json;charset=UTF-8'
                }, 
                body: JSON.stringify(data)
            }   
            
            //call api
            fetch(url, options)
                .then(response=> {
                    console.log(response.headers)
                }).catch(error=>console.log(error))
            }
    }


    render (){
        return( 
            <div className="register">
            <form onSubmit={this.handleSubmit}>
                <table>
                    <tbody>
                        <tr>
                            <td>Email:</td>
                            <td>
                                <input type="email" value={this.state.email} onChange={this.handleChangeEmail} />
                            </td>
                        </tr>
                        <tr> 
                            <td>Password:</td> 
                            <td>
                                <input type="text" value={this.state.password} onChange={this.handleChangePass}></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input disabled={false} type="submit" value="Submit" onSubmit={(e) => this.handleSubmit(e)}/>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
            </div>    
        )
    }
}

export default Login;

Что мне делать, чтобы решить эту проблему? Реагирующий клиент находится на локальном хосте: 3000 и express на локальном хосте: 3001

1 Ответ

0 голосов
/ 14 января 2020

Попробуйте установить http-proxy-middleware, используя npm или Yarn, затем создайте src/setupProxy.js и поместите в него следующее содержимое:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...