Question

我在AWS S3上托管了一个React应用，并在EC2实例上运行了一个Node服务器。在本地主机上测试我的React应用程序时，我可以使用通行证重定向到运行在EC2上的Node服务器，以进行身份验证。

那很好，但是当我出于某些原因将代码上传到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;

我的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
};

Answer 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>

在AWS S3存储桶上托管React应用时无法使用代理重定向到Node服务器

1 个答案: