title: Spring Boot - Cross-Origin Request Blocked (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
body: <p>I have this mapping:</p>
  
  <pre><code>User 1----------------------------* Expertises
  </code></pre>
  
  <p>I'm using the controller SpringBoot, My contoller is</p>
  
  <pre><code>@RestController
  @CrossOrigin(origins = "http://localhost:4200", "http://localhost:6227")
  @RequestMapping("/api/auth")
  public class UserController
  {
  
      @PostMapping("/signup/{expertises}")
      public ResponseEntity&lt;String&gt; registerUser(@Valid @RequestBody SignUpForm signUpRequest, @PathVariable List&lt;String&gt; expertises)
      {
      }
  }
  </code></pre>
  
  <p>I add the annotation <code>@CrossOrigin</code> to all the repositories</p>
  
  <pre><code>@CrossOrigin(origins = {"http://localhost:4200", "http://localhost:6227"}, methods = { RequestMethod.GET, RequestMethod.POST, RequestMethod.DELETE }, maxAge = 3600)
  @Repository
  public interface UserRepository extends JpaRepository&lt;User, Long&gt; {}
  </code></pre>
  
  <p>The main class is:</p>
  
  <pre><code>@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");
                  }
            };
      }
  
  }
  </code></pre>
  
  <p>I added the file <strong>MyConfiguration</strong> (as Sir <code>Ananthapadmanabhan</code> proposed)</p>
  
  <p><a href="https://i.stack.imgur.com/15EXH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/15EXH.png" alt="enter image description here"></a></p>
  
  <p><strong>Front-End (Angular6)</strong></p>
  
  <p>So I want to add a list of expertises to one user using this method:</p>
  
  <pre><code> onSubmit()
          {
              this.submitted = true;
              console.log('---------SelectedExpertise:' + this.selectedExpertiseCheckBox);
              this.userService.signUpUser(this.user,
                                          this.selectedExpertiseCheckBox)
                              .subscribe(data =&gt; console.log("---------------Create user:" + data)
                              ,error =&gt; console.log(error));
  
              this.user = new User();
          }
  </code></pre>
  
  <p>where </p>
  
  <pre><code>signUpUser(value: any, listExp: String[]): Observable&lt;Object&gt;
      {
          return this.http.post(`${this.baseUrl}/signup/${listExp}`, value);
      }
  </code></pre>
  
  <p>I can't do that cause adding the list of expertises. That produces <strong>this error</strong>
   <a href="https://i.stack.imgur.com/gsY6a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsY6a.png" alt="this error"></a></p>
  
  <p>Have you please any idea about solving that ?.
  Thanks.</p>