在 AWS S3 存储桶上托管 React 应用程序时，无法使用代理重定向到节点服务器答案

【问题标题】：Can't redirect with a proxy to Node server when hosting a React app on AWS S3 bucket在 AWS S3 存储桶上托管 React 应用程序时，无法使用代理重定向到节点服务器
【发布时间】：2018-09-03 20:46:40
【问题描述】：

我在 AWS S3 上托管一个 React 应用程序，并在 EC2 实例上运行一个节点服务器。在本地主机上测试我的 React 应用程序时，我可以重定向到我在 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 有一个 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
};

【问题讨论】：

标签： node.js reactjs amazon-s3 proxy

【解决方案1】：

这里有人遇到同样的问题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>

【讨论】：