Я пытаюсь разработать небольшой пример веб-приложения для презентации о React.
Я буду использовать React для внешнего интерфейса (работает под localhost: 3000) и Tomcat 9 (работает под localhost: 8080) и использую API выборки HTML5 для выполнения запросов.
Моя цель - предоставить аудитории (которая будет подключена к той же локальной сети) возможность подключаться к приложению с помощью своих браузеров и поддерживать сеансы.
Мое понимание сетей очень поверхностно, и поэтому я всегда не могу заставить это работать.
Мой текущий (неудачный) подход такой:
Я запускаю ifconfig , чтобы получить свой IP-адрес (например, http://192.168.0.18) и сообщить об этом аудитории, чтобы они подключились к http://192.168.0.18:3000, который является внешним приложением .
Используйте тот же IP-адрес, но с портом 8080, чтобы определить базовую базу URL-адресов, и выполните выборку:
const SERVER_BASE_URL = "http://192.168.0.18:8080";
return fetch(SERVER_BASE_URL+"/graphql", {
method:"POST",
body: JSON.stringify({
query:query,
params:params
}),
mode:"cors",
credentials:"include"
});
В Tomcat я пытаюсь включить поддержку CORS, добавив заголовки в мой класс реализации сервлета:
@Override
public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
HttpServletRequest httpReq = (HttpServletRequest)req;
HttpServletResponse httpRes = (HttpServletResponse)res;
httpRes.setHeader("Access-Control-Allow-Origin","*");
//...
}
Пока что я вижу, что запрос выполняется на вкладке сети моего браузера, и переменные сессий, похоже, правильно поддерживаются.
Но браузер отказывается обрабатывать ответ, говорящий:
Не удалось загрузить http://192.168.0.18:8080/graphql: Значение
Заголовок «Access-Control-Allow-Origin» в ответе не должен быть
подстановочный знак '*', когда режим учетных данных запроса 'include'. происхождения
'http://192.168.0.18:3000', поэтому запрещен доступ.
Итак, я попытался установить для учетных данных параметра fetch значение «Пропустить». Затем ошибка исчезает, как и сеанс.
Моя следующая идея, как упоминается в ошибке, заменить *
в заголовке Access-Control-Allow-Origin
точным источником, который я хочу разрешить. Проблема в моем случае, здесь указан мой локальный IP-адрес, и я не могу знать его заранее.
Мой вопрос :
Есть ли способ либо получить предсказуемое имя источника, так что я могу использовать это для моего клиентского приложения и сказать Tomcat, чтобы разрешить это, вместо использования символа *
, или Наличие Access-Control-Allow-Origin: * работает?