Angular Запрос PUT запрещен по SSL

Ответ 1

CORS применяется браузером, но в этом случае вы получаете 403 с сервера. Как отмечали другие, в вашем запросе отсутствует заголовок CSRF и, вероятно, почему сервер отклоняет ваш запрос. Я не могу понять, почему это произошло, когда вы перешли на HTTPS, но я могу сказать, что у вас есть <csrf/> в вашей конфигурации, но нет заголовка для соответствия.

Чтобы проверить эту теорию, вы можете отключить защиту CSRF, изменив:

<csrf/>

в

<csrf disabled="true"/>

Начиная с Spring 4 CSRF-защита включена по умолчанию, поэтому просто удалить <csrf/> будет недостаточно.

Как только вы подтвердили, что CSRF был проблемой, и вы больше не получаете 403, вы должны включить его обратно таким образом, чтобы Angular поддерживал. Это важная защита, которая защитит ваших пользователей. Angular ожидает файл cookie с именем XSRF-TOKEN, который он отправит обратно с заголовком X-XSRF-TOKEN. Они настраиваются, но должны соответствовать Spring по умолчанию, если вы используете последние Spring и последние Angular. Следуйте Spring документации, чтобы добавить:

<http>
    <!-- ... -->
    <csrf token-repository-ref="tokenRepository"/>
</http>
<b:bean id="tokenRepository"
    class="org.springframework.security.web.csrf.CookieCsrfTokenRepository"
    p:cookieHttpOnly="false"/>

Ответ 2

В вашей конфигурации безопасности загрузки spring я вижу, что csrf включен. Но в вашем запросе я не вижу cookie XSRF-TOKEN и заголовок X-XSRF-TOKEN. Вот почему сервер не принимает запрос и отвечает с ответом 403.

Возможно, ваш браузер не создает соединение SSL. Обычно это происходит, когда браузер находит неверный сертификат или сам подписанный сертификат или сертификат, подписанный центром сертификации, которому не доверяют.

Если вы используете браузер Chrome, вы можете включить его для локального хоста для целей тестирования, включив свойство allow-insecure-localhost. Введите этот адрес в адресной строке, нажмите Включить и перезапустите Chrome.

chrome://flags/#allow-insecure-localhost

Обратитесь к этой ссылке за дополнительной информацией, чтобы включить ее в chrome и firefox. https://improveandrepeat.com/2016/09/allowing-self-signed-certificates-on-localhost-with-chrome-and-firefox/

Ответ 3

Я думаю, что у вас должен быть токен X-XSRF-TOKEN в заголовке запроса, так как csrf включен в вашем conf conf безопасности. Для меня это сработало:

 constructor(private http: HttpClient, private tokenExtractor: HttpXsrfTokenExtractor) {
    }

Затем извлеките токен

const token = this.tokenExtractor.getToken() as string;

и добавьте его в заголовок

this.http.post<any>(url, body, {headers: new HttpHeaders().set('X-XSRF-TOKEN', token)})

Надеюсь, это поможет.

Ответ 4

HTTP-запросы, которые потенциально могут что-то изменить на сервере, такие как PUT, POST, DELETE и PATCH, не знают, разрешено ли им исполнять запрос, если они не были указаны заранее.

Они могут знать, читая заголовки более раннего запроса, которые позволили им изменить запрошенный ресурс, или они будут запускать запрос OPTIONS непосредственно перед этим. Это называется "предполетным" запросом.

Если вы не внедрили метод OPTIONS для ответа заголовками CORS, это то, что вам нужно сделать.

Посмотрите здесь для более подробной информации.

Ответ 5

Я столкнулся с аналогичной проблемой: My frontEnd находится в Angular4, Back-end в Spring, а аутентификация, которую я использовал, была проверкой на основе JWT. Я получал эту ошибку для моего запроса POST, но, я думаю, это относится и к PUT, так как оба относятся к "непростым запросам" (псевдоним для предполетного запроса).

Мой пользовательский интерфейс работает некоторое время, а затем я получаю следующую ошибку:

Невозможно загрузить https://localhost:8080/myApp/services/stationCollection/viewCollected. В запрошенном ресурсе нет заголовка "Access-Control-Allow-Origin".

После анализа я узнал, что запрос перед полетом проходит с полным успехом, его основной запрос, которому становится отказано в доступе к серверу (вы можете проверить, что на вкладке Сеть в инструментах chrome dev и получить детали). Тип отправляемого запроса CORS - это "непростые запросы". Тот факт, что, если вы отправляете один и тот же запрос, на тот же сервер с Rest Client/curl, он отлично работает.

Когда вы просматриваете эту ошибку в Интернете, вы обнаруживаете потерянные решения, все приводящие к настройке CORS на стороне сервера, но тот факт, что я уже реализовал CORS.

Возможное решение:

Все это привело к тому, что я нашел решение для одного и того же, и после многократного поиска я обнаружил, что существует возможность взлома/альтернативы для этой проблемы, как лучше всего определено в следующем блоге:

https://laracasts.com/discuss/channels/laravel/cros-access-control-allow-origin-not-in-the-headers

В блоге в основном предлагается создать промежуточное программное обеспечение, между всеми запросами, передаваемыми из интерфейса пользователя, в Front-end, и если вы знаете, что ваше приложение является аутентичным, добавьте

myOptions.headers.append('Access-Control-Allow-Origin', '*');

в средней посуде. Надеюсь, это поможет вам.

Ответ 6

Попробуйте добавить этот заголовок со стороны сервера Access-Control-Allow-Credentials: true

дополнительная информация

если это не поможет вам и другим почтовым запросам работать, как ожидалось, я боюсь, что некоторая часть вашего кода неверна.

Ответ 7

Почему бы вам не попробовать это в своем загрузочном приложении Spring?

HttpHeaders headers = new HttpHeaders();

headers.add("Access-Control-Allow-Origin", "*");
headers.add("Access-Control-Allow-Credentials", "true");
headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD");
headers.add("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");

return new ResponseEntity<>(service.update(input), headers, HttpStatus.OK);

Более подробные данные можно найти здесь https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

Ответ 8

Изменение конфигурации Spring, чтобы позволить CORS, возможно, не очень хорошая идея. То, что я сделал, это установить сервер nginx и использовать его в качестве обратного прокси. Ниже приведен пример nginx.conf:

# Spring backend
location /api
{
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_pass http://localhost:8493;
}

# Angular front end
location /
{
  root www/apps;
  try_files $uri $uri/ /index.html;
}