Я размещаю приложение React на AWS S3 и у меня работает Node-сервер на экземпляре EC2. При тестировании моего приложения React на локальном хосте я могу перенаправить на свой Node-сервер, работающий в EC2, в целях аутентификации с использованием паспорта.
Это прекрасно работает, но когда я по какой-то причине загружаю код в мое ведро S3, прокси не работает. Я получаю ошибку:
404 Не найдено
Код: NoSuchKey
Сообщение: указанный ключ не существует.
Ключ: auth / google
Также в браузере есть my_react_app_hosting_address.com/auth/google
так что мне кажется, что прокси не работает.
Любая причина, по которой прокси будет работать на локальном хосте, но не на хосте S3? Какие-нибудь исправления для этого?
В моем приложении для реагирования ...
В package.json есть:
{ ...
"proxy": {
"/auth/google": {
"target": "http://xxx.us-east-2.compute.amazonaws.com:8080"
}
}, ...
}
Теперь в одном из моих компонентов home.js есть Логин с Google ссылка, которая должна вызвать перенаправление:
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;
Мой файл index.js для моего Node-сервера:
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}`);
Мой файл utils.js, который имеет интерфейсный веб-адрес:
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
};