Spring boot redirect angular 5 проблема CORS

У меня есть приложение angular 5, которое отправляет запрос POST на мой сервер Spring Boot. В моем бэкэнде просто выполняется перенаправление в другое место моего приложения angular. (Я делаю это, потому что я имитирую перенаправление, которое я должен выполнить, когда внешняя служба отправляет запрос POST в мой бэкэнд), но когда из моего angular приложение Я отправляю почтовый запрос на свой сервер, чтобы выполнить перенаправление, когда возникает проблема:

Access to XMLHttpRequest at 'http://localhost:4200/payment_resume?state=1&billNumber=234343&description=descr&value=120.000&method=Visa' (redirected from 'http://localhost:8083/v1/redirect') from origin 'null' has been blocked by CORS policy: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

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

Бэкэнд-код:

@RequestMapping(value = "/redirect", method = RequestMethod.POST)
    @Transactional
    public void returnData(UriComponentsBuilder uriComponentsBuilder, final HttpServletRequest request,
            final HttpServletResponse response) throws IOException {

        String transactionState = "1";
        String billCode = "234343";
        String description = "descr";
        String billValue = "120.000";
        String paymentMethod = "Visa";


        response.sendRedirect(hostname+"/payment_resume?state = "+ transactionState
                +"&"+"billNumber = "+billCode
                +"&"+"description = "+description
                +"&"+"value = "+billValue
                +"&"+"method = "+paymentMethod);
        return;
    }

Конфигурация CORS:

@Configuration
@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {
@Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("*");
        configuration.addAllowedHeader("*");
        configuration.setAllowedMethods(Arrays.asList("GET","POST","PUT","PATCH","DELETE","OPTIONS"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

Код внешнего интерфейса:

redirect(){
    this.http.post(environment.apiUrlBase+"/redirect","").subscribe();
  }

мой вопрос в том, какую конфигурацию я должен сделать в моем приложении angular, чтобы это могло работать?

Огромное спасибо!

Чтобы противостоять эффекту CORS в моих проектах, я использовал прокси при запуске сервера Angular. Вот ссылка на сайт к другому сообщению о переполнении стека. Вероятно, он пропустит строку в конфиге. Я добавил: "changeOrigin": true. Проверить это.

GabLeg 27.11.2018 16:15
Поведение ключевого слова "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) для оценки ваших знаний,...
0
1
1 226
1

Ответы 1

У меня тоже была такая же проблема, и я использовал CrosFilter. Добавьте ниже Фасоль и попробуйте

@Bean
public CorsFilter corsFilter() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowCredentials(true);
    configuration.addAllowedOrigin("*");
    configuration.addAllowedHeader("*");
    configuration.addAllowedMethod("OPTIONS");
    configuration.addAllowedMethod("HEAD");
    configuration.addAllowedMethod("GET");
    configuration.addAllowedMethod("PUT");
    configuration.addAllowedMethod("POST");
    configuration.addAllowedMethod("DELETE");
    configuration.addAllowedMethod("PATCH");
    source.registerCorsConfiguration("/**", configuration);
    return new CorsFilter(source);
}

Я заменил ту конфигурацию, которую вы предложили, но она не сработала ..

AlejoDev 27.11.2018 14:05

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