У меня есть веб-приложение реагирования, и я использую реагирующие сценарии для разработки. Я использую прокси для передачи запросов и веб-сокетов бэкенду.
Мой пакет. json:
{
"name": "webapp",
"version": "0.1.0",
"private": true,
"dependencies": {
// ...
"react-scripts": "^3.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
// ...
},
"devDependencies": {
// ...
},
"homepage": "/home"
}
У меня есть setupProxy. js:
const proxy = require("http-proxy-middleware")
module.exports = app => {
app.use(proxy('/api', {
target: 'http://127.0.0.1:9140',
ws: true
}));
app.disable('etag');
}
Прокси работает отлично для http запроса. Веб-приложение реагирует на запрос http://localhost:3000/api/foo/bar, а запрос проксируется на http://localhost:9140/api/foo/bar.
Моя проблема связана с веб-сокетами. Реагирующее веб-приложение открывает веб-сокет в ws://localhost:3000/api/foo/bar, серверная часть получает запрос веб-сокета, обновляет его и отвечает кодом http 101. Но веб-приложение реагирует так и не получает этот ответ. Веб-приложение реагирует на ответ с кодом http 400. Итак, веб-сокет закрыт.
Я пытаюсь выяснить, почему приложение реагирует на ошибку 400. Я пробовал много конфигураций прокси (я пробовал конфигурацию прокси в файле package.json, я пробовал некоторые другие возможные конфигурации, основанные на странице http-proxy-middleware github).
Я обнаружил некоторые проблемы с http-proxy-middleware и react-scripts:
После некоторого расследования кажется, что проблема связана с sockjs-node, используемым Webpack. Похоже, sockjs-node перехватить запрос и заменить ответ моего бэкенда на ответ с ошибкой 400.
Кто-нибудь знает, как сделать так, чтобы веб-сокеты работали с прокси-сервером в приложении реагирования в процессе разработки?