Ошибка Cors при весенней загрузке на удаленных серверах - PullRequest
Новая
       2

Ошибка Cors при весенней загрузке на удаленных серверах

0 голосов
/ 21 июня 2020

Я пытаюсь развернуть простой внутренний сервер с весенней загрузкой и клиентское приложение React js на удаленном сервере Ubuntu, используя s sh. Эта программа отлично работает на localhost. Но когда я развертываю и передний, и задний конец на удаленном сервере Ubuntu и пытаюсь получить доступ через свой браузер на моем локальном компьютере, он выдает ошибку cors: «Межпроцессный запрос заблокирован: та же политика происхождения запрещает чтение удаленного ресурса на…».

ошибка cors в консоли браузера

Вот мой код настройки

Back end

Application. java

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }


    
    @Bean
    public FilterRegistrationBean<CorsFilter> simpleCorsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
        config.setAllowedMethods(Collections.singletonList("*"));
        config.setAllowedHeaders(Collections.singletonList("*"));
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new 

CorsFilter(source));
            bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
            return bean;
        }
}

контроллер. java

@ RestController publi c class TestController {

@GetMapping("/getTestData")
// @CrossOrigin(origins = "http://localhost:3000")
public MyResponse getTestData(){
    return new MyResponse();
}

}

приложение. properties 

server.port=8002

Front End 

import React, { Component } from 'react'


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      data: '',

    };
  }

  async componentDidMount() {
    const responsedata = await fetch('http://localhost:8002/getTestData');
    const json = await responsedata.json();
    this.setState({ data: json.name });

  }

  render() {
    return (
      <div>
        <p>{this.state.data}</p>
      </div>
    )
  }
}
export default App;

Я разрешил порт 3000 через ufw, любая помощь будет принята с благодарностью ...

1 Ответ

0 голосов
/ 21 июня 2020

Предполагая, что @CrossOrigin не подходит для вас, попробуйте. 

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/greeting-javaconfig").allowedOrigins("http://yourdomain.com:port");
        }
    };
}
...