Ошибка загрузки файла внутреннего API AdonisJS из-за CORS

Я использую Docker Compose, чтобы вызвать два контейнера Docker:

  1. Стандартный контейнер nginx, запускающий приложение WebPacked Vue.js и прослушивающий порт 9090.
  2. Стандартный контейнер node, запускающий npm start внутри проекта AdonisJS и прослушивающий порт 3333.

Цель состоит в том, чтобы использовать AJAX для загрузки файла из http://website.com:9090 в http://website.com:3333, а затем отправить обратно успешный ответ. Локально в разработке, CORS не является проблемой, и все запросы выполняются. Однако при развертывании в «производственной среде» (или при планировании производства) я получаю следующую ошибку в консоли JS в Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://lemcoe.nato:3333/uploader. (Reason: CORS request did not succeed).

Глядя на вкладку «Сеть» в Firefox, я вижу как запросы OPTIONS, так и POST (запрос, который фактически загружает файл). Запрос OPTIONS кажется успешным, и это заголовки запроса и ответа на этот запрос: (на этом рисунке lemcoe.nato локально указывает на website.com с помощью DNS)

Ошибка загрузки файла внутреннего API AdonisJS из-за CORS

Тем не менее, загрузка файла на самом деле никогда не происходит. Вот заголовки POST-запроса, на который так и не был получен ответ:

Ошибка загрузки файла внутреннего API AdonisJS из-за CORS

Вот конфигурационный файл AdonisJS config/cors.js:

module.exports = {
    origin: '*',
    methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE'],
    headers: true,
    exposeHeaders: false,
    credentials: false,
    maxAge: 90
}

Я перепробовал все комбинации этих настроек, которые только мог придумать, и сделал все, что мог, чтобы гарантировать, что все порты правильно отображаются в Docker. Тем не менее, все веб-браузеры отображают ошибку CORS при попытке выполнить загрузку файла во внутренний контейнер.

С чего мне начать, чтобы отладить эту проблему? Я считаю, что ответ проекта на первоначальный запрос OPTIONS является удовлетворительным, но мне, должно быть, чего-то не хватает, когда дело доходит до второго этапа этого процесса. Что мне интересно, так это то, что когда один и тот же точный код выполняется локально на тех же портах, но без Docker, все работает так, как ожидалось, и CORS никогда не упоминается в консоли. Проблема CORS становится проблемой только тогда, когда два проекта изолированы на одном хосте Docker (с одинаковыми портами и доменами).

Спасибо!

Что касается ответа на OPTIONS, да, на основе заголовков запроса и ответов, показанных в вопросе, предварительная проверка OPTIONS прошла успешно. В противном случае ваш браузер остановился бы и никогда не отправлял POST из вашего кода. Но поскольку он отправляет этот POST, вы можете точно знать, что предварительная проверка OPTIONS действительно прошла успешно.

sideshowbarker 30.05.2018 00:32

Вы говорите, что браузер никогда даже не получает ответ на POST после его отправки, но ошибка «Запрос на другой источник заблокирован: та же политика происхождения запрещает чтение удаленного ресурса…», похоже, указывает на иное. Похоже, что эта ошибка связана с сообщением браузера: «Я получил ответ (на POST), но я не могу предоставить его вашему коду внешнего интерфейса». Основная (возможно, единственная) причина, по которой браузер будет это делать, заключается в том, что в ответе на POST отсутствует заголовок Access-Control-Allow-Origin. Тот факт, что этот заголовок находится в ответе OPTIONS, не означает, что он также присутствует в ответе POST.

sideshowbarker 30.05.2018 00:36

Итак, учитывая вышеизложенное, похоже, вы, вероятно, захотите использовать инструменты разработчика, чтобы убедиться, что браузер действительно получает ответ на запрос POST, а затем проверьте заголовки ответов, чтобы увидеть, есть ли там Access-Control-Allow-Origin или нет. Если это не так, необходимо изменить конфигурацию CORS на этой конечной точке http://lemcoe.nato:3333/uploader, чтобы отправить ее.

sideshowbarker 30.05.2018 00:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
691
0

Другие вопросы по теме