Блог

Главная - Вопросы по программированию - ошибка при попытке вызвать API, размещенный на heroku, из приложения netlify

ошибка при попытке вызвать API, размещенный на heroku, из приложения netlify

#reactjs #spring-boot

Вопрос:

У меня есть приложение React, развернутое в Netlify, и серверная часть spring на Heroku. Когда я получаю доступ к приложению react и захожу в систему, я получаю ошибку CORs,

 Access to XMLHttpRequest at 'https://glacial-sierra-91195.herokuapp.com/api/1.0/login' from origin 'https://elastic-mccarthy-484725.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я впервые пытаюсь разместить приложение онлайн таким образом. Читая об этом, кажется, это потому, что сейчас я использую 2 разных сервера для фронтальной и серверной части. Но я всегда использовал два разных при тестировании: localhost: 3000 для react и localhost: 8080 для spring backend.

В моем файле react package.json у меня есть это, "proxy": "http://localhost:8080" которое, как я думал, должно было указывать вызовы api на внутренний сервер. Но действительно ли это также решает эту проблему Cors? Если я изменю это на, "proxy": "https://glacial-sierra-91195.herokuapp.com/" тогда все будет работать нормально, когда я запускаю свое приложение react локально на localhost: 3000, но если я нажимаю на github и открываю его через свой веб-сайт netlify, я получаю сообщение об ошибке post, поскольку оно пытается опубликовать https://elastic-mccarthy-484725.netlify.app/api/1.0/login so, используя URL-адрес netlify, а не heroku, гдесерверная часть размещена из.

Ответ №1:

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

в моем классе webConfiguration я добавил

 @EnableWebMvc //For the class

@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**"); //Gives access to all endpoints
    }

Затем я обновил свой класс SecurityConfiguration (это необходимо при использовании Spring security.

 @Configuration
@EnableWebSecurity //added
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfiguration extends WebSecurityConfigurerAdapter{

    @Bean
    public UserDetailsService userDetailsService() {
        return new UserDetailsServiceImpl();
    }
    @Autowired
    AuthUserService authUserService;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable();

        http.httpBasic().authenticationEntryPoint(new BasicAuthenticationEntryPoint());

        http
                .cors() //added
                .and()//added
                .authorizeRequests()
                    .antMatchers("/api/1.0/signup").hasAnyAuthority("ADMIN")
                    .antMatchers(HttpMethod.POST, "/api/1.0/login").authenticated()
                    .antMatchers(HttpMethod.PUT, "/api/1.0/users/{id:[0-9] }").authenticated()
                    //.antMatchers(HttpMethod.DELETE, "/api/1.0/management/users/delete/{id:[0-9] }").authenticated()
                .and()
                .authorizeRequests().anyRequest().permitAll();

        http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }

Теперь все работает нормально.

Метки: , ,