Как использовать прокси для ссылки с reactjs
Я работаю над веб-сайтом, использующим Reactjs и Typescript для интерфейса, а серверная часть находится на Java. В процессе разработки я использую порт 3000 для внешнего интерфейса и порт 8080 для внутреннего интерфейса. Я установил свойство прокси на package.json
"proxy": "http://localhost:8080"
поэтому у меня нет проблем, когда я делаю запросы к бэкэнду, потому что прокси работает отлично.
Теперь мне нужно создать несколько ссылок для загрузки отчетов, поэтому я создаю ссылки динамически, и мне нужно, чтобы они указывали на порт 8080, а не на порт 3000.
Я передаю URL-адрес, например:
<a href = {this.state.url}>Download Report</a>
где this.state.url выглядит как / отчеты / загрузка / пользователи и имеет смысл указывать на http: // 3000 / отчеты / загрузка / пользователи
Любая идея, как создать ссылки в dev, чтобы указать на порт 8080.
Обновлено
Прокси-сервер работает с запросом, подобным приведенному ниже коду:
fetch('./app/admin/reports/availableReports')
.then(res => res.json())
.then(json => json.reportTypes)
.catch(ex => {
console.info('Alert!!', ex)
return []
})
Но он не работает, когда я генерирую ссылку url:
<a href = {'app' + this.state.currentDownloadUrl}>Download Report</a>
да, но он не работает со ссылками, просто когда я запрашиваю что-то путем выборки, но пока я использую URL-адреса, всегда указывают на порт 3000 (я имею в виду интерфейс) @jonrsharpe
И работает ли прокси нет при нажатии на них?
Нет. Прокси-сервер работает только при запросах ajax, но в случае ссылки всегда указывает на интерфейсный порт. Я не знаю, как это решить.
Ответы 2
Я использовал одно не очень хорошее решение, как мне кажется, но оно у меня работает.
<a href = {`http://localhost:8000${record_detail_item.file}`} download>Download File</a>
У вас может быть некоторая глобальная переменная, которая указывает на ваш сервер разработки, и вы можете использовать ее вместо http://localhost:8000.
- Обновлять: Вместо URL-адреса жесткого кодирования вы можете установить переменные среды Переменные среды create-react-app
Вы не должны использовать свойство proxy для установки базового URL-адреса серверной части. Согласно документу:
Keep in mind that
proxyonly has effect in development (withnpm start), and it is up to you to ensure that URLs like/api/todospoint to the right thing in production.
Когда вы создадите свое приложение, оно не будет работать.
Вы должны добавить переменную среды для вашего базового URL-адреса бэкэнда и добавлять его, когда вы делаете бэкэнд-вызовы.
Что-то типа
fetch(`${process.env.REACT_APP_API_ENDPOINT}/app/admin/reports/availableReports`)
.then(res => res.json())
.then(json => json.reportTypes)
.catch(ex => {
console.info('Alert!!', ex)
return []
})
<a href = {`${process.env.REACT_APP_API_ENDPOINT}${this.state.currentDownloadUrl}`}>Download Report</a>
Разве это не то, что делает прокси? Вы запрашиваете
http://localhost:3000/reports/download/users, и прокси указывает вместо этого на:8080. Преимущество использования прокси-сервера заключается в том, что вы можете использовать маршруты относительный для всего, даже если передняя и задняя части работают на разных портах в dev.