I am following a tutorial on how to do a login authentication using spring security and angular but whenever I'm running the angular program and try to login I get a 401 error. I feel like it's a cors issue and created a cors filter class which was a solution to a similar question but i'm still getting the same error. The login details are correct as I use the same credentials to login to localhost:8080 for the backend but when I try to login using the front-end I get the following error in the index.
Error:
Request URL: http://localhost:8080/login
Request Method: GET
Status Code: 401
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access_token, authorization, content-type
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS, DELETE
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 4200
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0
Date: Tue, 28 Jul 2020 07:47:34 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
WWW-Authenticate: Basic realm="Realm"
WWW-Authenticate: Basic realm="Realm"
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Accept: application/json, text/plain, /
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: Basiccml6YW5hOmp0MTQz
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:4200
Referer: http://localhost:4200/login
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Mobile Safari/537.36
I've tried:
Angular 2 Spring Boot Login CORS Problems
Tutorial:
https://www.youtube.com/watch?v=QV7ke4a7Lvc
spring security config
@Configuration
public class SpringConfig extends WebSecurityConfigurerAdapter {
@Autowired
private CORSFilter myCorsFilter;
//CORS
@Override
protected void configure(HttpSecurity http) throws Exception {
/* http.cors().and().csrf().
disable()
.authorizeRequests()
.antMatchers(HttpMethod.OPTIONS, "/**")
.permitAll()
.anyRequest()
.fullyAuthenticated()
.and()
.httpBasic();*/
http.addFilterBefore(myCorsFilter, ChannelProcessingFilter .class);
http.cors();
http.csrf().disable();
http.authorizeRequests().antMatchers("/**").fullyAuthenticated().and()
.httpBasic();
}
protected void configure(AuthenticationManagerBuilder auth) throws Exception{
auth.inMemoryAuthentication()
.withUser("java")
.password("{noop}jt143").roles("USER");
}
}
Corsfilter class
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CORSFilter implements Filter {
/**
* CORS filter for http-request and response
*/
public CORSFilter() {
}
/**
* Do Filter on every http-request.
*/
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "4200");
response.setHeader("Access-Control-Allow-Headers", "access_token, authorization, content-type");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
chain.doFilter(req, res);
}
}
/**
* Destroy method
*/
@Override
public void destroy() {
}
/**
* Initialize CORS filter
*/
@Override
public void init(FilterConfig arg0) throws ServletException {
}
}
@RestController
@CrossOrigin(origins = "*")
public class CashierController {
@Autowired
private CashierRepo repository;
@GetMapping("/login")
public String login(){
return "authenticated";
}
@PostMapping("/addUser")
public String saveCashier(@RequestBody Cashier cashier) {
repository.save(cashier);
return "Added user with user id : " + cashier.getUserId();
}