Ошибки CORS, но только со специальными символами в URL

Question

Мое клиентское веб-приложение написано с использованием Angular, а на стороне сервера используется шлюз AWS API.

Я получаю сообщение об ошибке:

Access to XMLHttpRequest at <my destiniation> from origin <my origin> has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Где <my destination> и <my origin> не являются одним и тем же доменом.

Проблема в том, что у меня есть настройка CORS для поддержки этого. Моя установка использует предварительный запрос OPTIONS, за которым следует запрос PUT (PUT - это ошибка 403, и консоль показывает ошибку CORS). Ответ на запрос OPTIONS на самом деле включает access-control-allow-origin: *, и самое странное, что мой запрос PUT завершится неудачей, только если один (или более) из моих аргументов параметра URL содержит в себе% 23 (например, в результате URL, кодирующий символ #).

Кто-нибудь знает, почему специальные символы в параметрах URL приводят к ошибке CORS, тогда как точно такой же запрос без специальных символов проходит CORS без каких-либо проблем? Чего мне не хватать?

Answer 1

Благодаря помощи sideshowbarker я смог решить эту проблему. Оказывается, что ошибка CORS на самом деле была красной сельдью.

Пройдя немного глубже, я узнал, что подпись AWS не совпадает (но только при включении специальных символов), и обнаружил, что мне нужно было дважды кодировать мои параметры для правильного вычисления подписи. Я сделал это с decodeURIComponent() для каждого параметра, который может содержать специальные символы, а затем я использовал decodeURI() для получающегося целого URL (фактически двойное кодирование проблемных параметров). Подпись теперь проходит и запросы успешно выполняются.

Эта проблема / решение, вероятно, уникальна для того, как мое клиентское приложение (на Angular) работает с сигнатурами AWS, но может пригодиться кому-то еще, кто получает подобные ошибки.