I'm hosting a React app on AWS S3 and have a Node server running on an EC2 instance. When testing my React app on local host I'm able to redirect to my Node server running on EC2 for authentication purposes using passport.
That works fine but when I upload the code to my S3 bucket for some reason the proxy does not work. I get the error:
404 Not Found Code: NoSuchKey Message: The specified key does not exist. Key: auth/google
Also in the browser is my_react_app_hosting_address.com/auth/google
so it seems to me that the proxy isn't working.
Any reason the proxy would work on local host but not when hosted on S3? Any fixes for this?
In my react app... package.json has:
{ ...
"proxy": {
"/auth/google": {
"target": "http://xxx.us-east-2.compute.amazonaws.com:8080"
}
}, ...
}
Now in one of my components home.js has a Login with Google link that should cause the redirect:
import React, { Component } from 'react';
import { Redirect } from 'react-router';
import logo from '../logo.svg';
import '../App.css';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
ticker: "BTC",
redirect_welcome: false,
redirect_dashboard: false
}
}
handleOnClickWelcome = () => {
this.setState({
redirect_welcome: true
});
};
handleOnClickDashboard = () => {
this.setState({
redirect_dashboard: true
});
};
componentDidMount(){
fetch('https://api.coinmarketcap.com/v2/ticker/2/')
.then(response => {
return response.json();
}).then(myJson => {
this.setState({
ticker: myJson.data.symbol
})
});
}
render() {
if(this.state.redirect_welcome){
return <Redirect push to="/welcome"/>;
} else if(this.state.redirect_dashboard) {
return <Redirect push to="/dashboard" />;
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
Favorite coin is: {this.state.ticker} jk jk... check out our .
</p>
<button onClick={this.handleOnClickWelcome} type="button">Welcome</button>
<button onClick={this.handleOnClickDashboard} type="button">Dashboard</button>
<a href="/auth/google"><p>Login With Google new</p></a>
<p>page.</p>
</div>
);
}
}
export default Home;
My index.js file for my Node server:
const express = require('express');
const passport = require('passport');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const cookieSession = require('cookie-session');
const keys = require('./config/keys');
const utils = require('./utils');
const cors = require('cors');
require('./models/User');
require('./services/passport');
const Person = require('./models/Person');
mongoose.connect(keys.mongoURI,
{useNewUrlParser: true}).catch(err => {
console.log("mongo connection error", err);
});
const app = express();
app.use(
cookieSession({
maxAge: 30 * 24 * 60 * 60 * 1000,
keys: [keys.cookie]
})
);
app.use(passport.initialize());
app.use(passport.session());
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
// 'http://localhost:3000' or where ever front end is
app.use(cors({origin: utils.BASE_URL_FRONT_END}));
require('./routes/authRoutes')(app);
app.get('/', (req, res) => {
res.send('okay');
});
const PORT = utils.PORT_NUMBER;
app.listen(PORT);
console.log(`Node server running and listening on port ${PORT}`);
My utils.js file which has the front end web address:
const PRODUCTION = true;
module.exports = {
BASE_URL_FRONT_END : PRODUCTION ?
// "http://xxx.us-east-2.compute.amazonaws.com:8080" :
"http://xxx.us-east-2.amazonaws.com" :
"http://localhost:3000",
PORT_NUMBER : PRODUCTION ? 8080 : 3001
};