No 'Access-Control-Allow-Origin' header Vue/Spring boot

Question

I can't seem to figure out this error "No 'Access-Control-Allow-Origin' header".

I have a Vue frontend running on localhost:8080 and spring backend generating JWT tokens on locahost:8082

While trying to post credentials to my /signin I keep consistently getting this error. I have tried @CrossOrigin("http://localhost:8080") on my spring controller, as well as a CorsConfigurationSource global bean in my SecurityConfig. Below is my Vue code for the login post using axios:

    login(context, creds, redirect) {
    var headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
      }
    axios.post(LOGIN_URL, '{"username": "name", "password": 
    "pass"}', headers)
    .then(function(response){
        console.log(response)
        this.user.authenticated = true
     }).catch(function (error) {
        console.log(error);
     });
     },

My sign in page takes {"username": "name", "password": "pass"}, I have a login page that passes username and password on login press but was eliminating possible reasons so I hardcoded it for testing in above code.

Lastly I have tried the chrome CORS plugin which gets rid of the error but still returns a 403. Everything works perfect in postman.

Try `@CrossOrigin(origins = "http://localhost:8080")` instead. — acdcjunior, Apr 15 '18 at 04:39

score 0 · Answer 1 · answered Apr 15 '18 at 07:26

Foundout @CrossOrigin(origins = "*", allowedHeaders = "*") only works inside my api which is strange. BUT by adding in this global method:

 @Bean
 public WebMvcConfigurer corsConfigurer() {
   return new WebMvcConfigurerAdapter() {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
   registry.addMapping("/**").allowedOrigins("http://localhost:8080");
         }
       };
}

my issue before was that not having .allowedOrigins at the end it wouldn't work.

No 'Access-Control-Allow-Origin' header Vue/Spring boot

1 Answers1