Перенаправление на внешний URL с экспресс-сервера через GET-запрос от React App - PullRequest
Новая
       7

Перенаправление на внешний URL с экспресс-сервера через GET-запрос от React App

0 голосов
/ 14 ноября 2018

Предположим, у меня есть два сервера A и B:
A -> Сервер приложений React
B -> Сервер API (в моем случае Node with Express)
Оба из которых у меня есть контроль.

У меня включен CORS на сервере B, а при разработке я использую прокси в клиентском приложении package.json для запроса сервера API.

Теперь проблема заключается в том, что когда я отправляю запрос GET с сервера A на сервер API и запрашиваю его перенаправить на другой внешний URL-адрес, я получаю ошибку CORS в своем приложении React.

Но, когда я делаю GET-запрос к серверу API через Postman, я перенаправляюсь. Я понимаю, что это происходит потому, что сервер приложения реакции не зарегистрирован в CORS, а сервер API - зарегистрирован.

И эту проблему можно устранить, если оба приложения находятся на одном сервере. Поправь меня, если я ошибаюсь?

В настоящее время я выполняю обходной путь, отправляя запрос GET серверу API, получая URL-адрес перенаправления в качестве ответа и выполняя перенаправление на стороне клиента.

Теперь мой вопрос заключается в том, существует ли какой-либо другой возможный способ, которым мне не нужно получать URL-адрес перенаправления в качестве ответа / помещать оба приложения на один и тот же сервер и вместо этого сразу выполнять перенаправление?

Я хочу, чтобы поток запросов был:
React App [ app.com ] ---- GET ----> Api-сервер [ api.app.com ]) ---- REDIRECT ----> Внешний URL-адрес

Моя текущая реализация:

Фрагмент API 

try {
    let url = await Urls.findOne({ shortCode: shortCode });

    if(!url) {
        // Send 404
        return res.status(404).send({ status: "NOT_FOUND" });
    }
    // Redirect to original URL
    //res.redirect(url.longUrl);
    return res.status(200).send({ status: "FOUND", url: url.longUrl });
}
catch(error) {
    console.log(error);
    return res.status(500).send({ status: "FAILED" });
}

Клиентская сторона 

componentDidMount() {
    let id = this.props.match.params.id;

    axios.get(`/api/${id}`)
        .then(response => {
            window.location.replace(response.data.url);
        })
        .catch(error => {
            this.setState({ displayError: true, errorType: error.response.data.status })
        });
}

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Вы уверены, что response.data.url является действительным или неопределенным URL? Попробуйте console.log(response.data.url) для подтверждения. Если значение не определено, замените res.send() с сервера на res.json()

0 голосов
/ 14 ноября 2018

Вы можете использовать res.redirect (301, 'http://example.com'); для перенаправления на внешний URL в экспрессе и в терминах CORS, я думаю, что вы не должны получать эту ошибку в приложении реагировать, потому что вы делаете перенаправление на сервер иОшибки CORS возникают, когда вы пытаетесь получить доступ к API-интерфейсу сервера с внешнего URL-адреса, который не был добавлен в CORS, или вы можете установить заголовки CORS на своем сервере как * или указать конкретный URL-адрес, к которому вы хотите предоставить доступ.вы получаете ошибку CORS при перенаправлении из ответа API сервера, тогда вы, вероятно, делаете что-то не так.

...