Spring Boot - блокировка запроса между источниками (причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»)

Question

У меня есть это отображение:

User 1----------------------------* Expertises

Я использую контроллер SpringBoot, Мой контроллер

@RestController
@CrossOrigin(origins = "http://localhost:4200", "http://localhost:6227")
@RequestMapping("/api/auth")
public class UserController
{

    @PostMapping("/signup/{expertises}")
    public ResponseEntity<String> registerUser(@Valid @RequestBody SignUpForm signUpRequest, @PathVariable List<String> expertises)
    {
    }
}

Я добавляю аннотацию @CrossOrigin ко всем репозиториям

@CrossOrigin(origins = {"http://localhost:4200", "http://localhost:6227"}, methods = { RequestMethod.GET, RequestMethod.POST, RequestMethod.DELETE }, maxAge = 3600)
@Repository
public interface UserRepository extends JpaRepository<User, Long> {}

Основной класс:

@SpringBootApplication
public class SpringBootJwtAuthenticationApplication {

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


    @Bean
    public WebMvcConfigurer configurer()
    {
          return new WebMvcConfigurer()
          {
                @Override
                public void addCorsMappings(CorsRegistry registry)
                {
                  registry.addMapping("/*")
                      .allowedOrigins("http://localhost:4200", "http://localhost:6227");
                }
          };
    }

}

Я добавил файл MyConfiguration (как предложил Sir Ananthapadmanabhan)

Front-End (Angular6)

Поэтому я хочу добавить список экспертиз для одного пользователя, используя этот метод:

 onSubmit()
        {
            this.submitted = true;
            console.log('---------SelectedExpertise:' + this.selectedExpertiseCheckBox);
            this.userService.signUpUser(this.user,
                                        this.selectedExpertiseCheckBox)
                            .subscribe(data => console.log("---------------Create user:" + data)
                            ,error => console.log(error));

            this.user = new User();
        }

где

signUpUser(value: any, listExp: String[]): Observable<Object>
    {
        return this.http.post(`${this.baseUrl}/signup/${listExp}`, value);
    }

Я не могу этого сделать, добавив список экспертиз.Это приводит к этой ошибке

Есть ли у вас какие-либо идеи по поводу решения этой проблемы?Спасибо.

Answer 1

Вы включили CORS для конечной точки http://localhost:4200 для адреса порта 4200. Но кажется, что вы запускаете приложение angular 6 отдельно для локального, и запрос выполняется с адреса порта 6227, что может быть причиной проблемы, так как включенная политика CORS разрешает только тот же источник. Попробуйте добавить следующее в CORS:

@CrossOrigin(origins = "http://localhost:6227")

и если у вас все еще есть проблемы с Cross-Origin Request Blocked (Reason: CORS header ‘Access-Control-Allow-Origin’ missing), проверьте этот пост:

Конфликт политики CORS при загрузке Spring

Answer 2

Как указано на консоли; это была проблема с CORS . Но на самом деле это не так.

На самом деле, эта ошибка вызвана неправильным использованием localStorage с внешним интерфейсом: список строк должен быть назван так:

var storedExpertises = JSON.parse(localStorage.getItem("explib"));

и не так:

localStorage.getItem("explib")

Большое спасибо, сэр @Ananthapadmanabhan, за вашу помощь и советы.

Answer 3

Даже через вас включен CORS.Запросы из разных портов не будут проходить.Вам необходимо включить HTTP.OPTIONS .