Home » Java » VueJS and SpringBoot Cross-Origin error

VueJS and SpringBoot Cross-Origin error

Posted by: admin October 22, 2018 Leave a comment

Questions:

I’m faced with a big issue when trying to access a my Rest API, build with Springboot from my VueJS frontend.

Backend-URL = http://localhost:8080
Frontend-URL = http://localhost:8081

In the main.js file I added the following defaults for axios:

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept';
axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;

On the backend site I added the following entries:

All controllers

@CrossOrigin(origins = "http://localhost:8081")
@RestController
public class ControllerName {
...

NewFile: DevelopmentWebSecurityConfigurerAdapter (same package as main method)

package de.my.server;

import java.util.Arrays;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import lombok.extern.slf4j.Slf4j;


@Slf4j
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class DevelopmentWebSecurityConfigurerAdapter extends WebMvcConfigurerAdapter {

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://locahost:8081"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    protected void configure(HttpSecurity http) throws Exception {

        //http.csrf().disable();
        http
        .cors()
        .and()
        .csrf().disable()
        .anonymous().disable()
        .authorizeRequests()
        .antMatchers("/api").permitAll()
        .antMatchers(HttpMethod.OPTIONS, "/**").permitAll();

    }
}

new Filter “CorsFilter” (simply added the java file in the same package as the main method)

package de.my.server;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;


@Component
public class CorsFilter implements Filter {

    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request= (HttpServletRequest) servletRequest;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "false");
        response.setIntHeader("Access-Control-Max-Age", 3600);
        filterChain.doFilter(servletRequest, servletResponse);
    }


    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

Until now nothing works…
Does anyone got a hint for my how to access my api?

Kind regards
tschaefermedia

Answers: