Question

我正在将产品组合部署到Firebase。我有一个联系页面，它会将信息发送到计划部署到Heroku的后端。

我不确定我将把handleSubmit中的localhost更改为什么。如果要部署，该如何修改？

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.validate()) {
            console.log(e.target);
            this.setState({
                disabled: true,
                emailSent: null
            });
            Axios.post('http://localhost:4000/api/email', this.state)
                .then(res => {
                    if(res.data.success) {
                        this.setState({
                            emailSent: true
                        });
                        this.clearForm();
                    } else {
                        this.setState({
                            disabled: false,
                            emailSent: false
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.setState({
                        disabled: false,
                        emailSent: false
                    });
                })
        }
    }

Answer 1

根据您的情况有多种解决方案。您没有为我提供足够的详细信息，无法给您确切的答案。但是，您可以尝试以下操作：

如果您的应用程序部署在同一域中，则可以使用相对路径，如：

this.route.paramMap.pipe(
  map(params => params.get('id')),
  switchMap(profileName => db.doc<any>('usernames/' + profileName).valueChanges()),
  switchMap(val => db.doc<User>('users/' + val.user).valueChanges()),
  switchMap(val => this.db.collection<Post>('posts', ref => ref.where('user', '==', val.uid)).snapshotChanges())
).subscribe(val => {});

如果您的应用程序未部署在同一域中，则必须将此变量注入代码中。最好的方法是利用节点的进程Axios.post('/api/email', this.state)。任何与该过程相关的内容都将由webpack读取和处理（我假设这就是您所使用的）。然后，您将在部署之前就在构建管道中注入API URL。您的构建看起来像这样：

process.argv

在您的代码中，您将必须获取该URL并使用它。看起来像这样：

npm run build --api-url=http://yourdomain/url/to/apis

然后在通话中使用URL

// Get the arguments from the process
let args = process.argv.slice(2); // first 2 are node specific

// Try to find the api-url you passed
let argsApiUrl = args.filter(arg => arg.startsWith('--api-url'))[0];

// Use it if it exist, otherwise, use the localhost
let apiUrl = argsApiUrl
                 ? argsApiUrl.split('=')[1]
                 : 'http://localhost:4000/api/email';

我将如何修改handleSubmit以便在React中进行部署？

1 个答案: