[英]Can't redirect with a proxy to Node server when hosting a React app on AWS S3 bucket
我在 AWS S3 上托管了一个 React 应用程序,并在 EC2 实例上运行了一个 Node 服务器。 在本地主机上测试我的 React 应用程序时,我可以使用通行证重定向到我在 EC2 上运行的节点服务器以进行身份验证。
这工作正常,但是当我由于某种原因将代码上传到我的 S3 存储桶时,代理不起作用。 我收到错误:
404 未找到代码:NoSuchKey 消息:指定的密钥不存在。 密钥:授权/谷歌
浏览器中还有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 有一个Login with 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;
我的 Node 服务器的 index.js 文件:
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
};
有人在这里遇到同样的问题Authentication with Passport + Facebook + Express + create-react-app + React-Router + proxy
简短的回答是,您可以首先避免使用代理,并将整个 URL 放入您的后端服务器的 href 中,如下所示:
<a href="http://ec2-xxx-xxx-91.us-east-2.compute.amazonaws.com:8080/auth/google"><p>Login With Google new</p></a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.