Блог

Я развертываю свой портфель в Firebase. У меня есть страница контактов, и она будет отправлять информацию на серверную часть, которую я планирую развернуть в Heroku.

Я не уверен, на что бы я изменил localhost в handleSubmit. Как бы я изменил это, если бы я развертывал?

     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
                    });
                })
        }
    }
  

Существует несколько решений, основанных на вашем случае. Вы не предоставили достаточно подробностей, чтобы я мог дать вам окончательный ответ. Но вот что вы можете попробовать:

Если ваше приложение развернуто в том же домене, вы можете использовать относительный путь, как в:

 Axios.post('/api/email', this.state)
  

Если ваше приложение развернуто не в том же домене, вам нужно ввести эту переменную в код. Лучший способ сделать это — использовать процесс узла process.argv . Все, что связано с процессом, будет прочитано и обработано webpack (я предполагаю, что это то, что вы используете). Затем вы должны ввести URL-адрес API во время конвейера сборки прямо перед развертыванием. Ваша сборка будет выглядеть следующим образом:

 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';

  

А затем используйте URL-адрес в вашем вызове

 Axios.post(apiUrl, this.state)