We Keep Coding

CORS POST request fails on Chrome, Safari and Firefox

I have a RESTfull Backend implemented with Spring security running on localhost:8080, a Login filter responds to login requests with a token placed in the headers, I didn’t even implemented an Endpoint method for that, It is all done by Spring Security magic by the following line of code:
protected void configure(HttpSecurity http) throws Exception {
// disable caching
http.headers().cacheControl();
http.csrf().disable() // disable csrf for our requests.
.authorizeRequests()
.antMatchers("/").permitAll()
.antMatchers("/login").permitAll()
.anyRequest().authenticated()
.and()
// We filter the api/login requests
.addFilterBefore(new JWTLoginFilter("/login", authenticationManager()), UsernamePasswordAuthenticationFilter.class)
…
The frontend is a Angularjs Nodejs NPM Bower project running a static http server on localhost:8000. On frontend I make a simple POST request as follows:
$scope.login = function () {
var data = {
"username":$scope.username,
"password":$scope.password
}
$http({
url: baseUrl,
method: "POST",
data: data
}).then(function (response) {
console.log("###### SUCCESS #####");
var headers = response.headers();
console.log("headers: "+JSON.stringify(headers));
var token = headers.authorization.split(" ")[1];
console.log("token: "+token);
$http.defaults.headers.common['Authorization'] = token;
$location.path("/view1");
}, function (responseData) {
// called asynchronously if an error occurs
// or server returns responseData with an error status.
console.log("###### FAIL #####");
console.log("Response: "+JSON.stringify(responseData));
$window.alert("Failed to Login");
});
This works like a charm in IE (also with curl, wget and python requests) but it miserably failing on Chrome and Safary.
I know that those Browsers are blocking CORS POSTs, making the request empty as soon as the reach the backend, in fact I don’t see any data when I log out the request from backend. I tried every possible combination of:
Frontend side:
1) $http(method: POST)
2) $http.post(
3) Adding flags: Access-Control-Allow-Origin, Access-Control-Expose, etc.
4) Adding all possible header combination: ‘Content–Type’:’application/
Browser side:
1) Start chrome with flag: --disable-web-security
2) Installing Chrome extension CORS
Backend side:
1) Spring Security Disable csfr
2) Spring Security Permit all
3) Spring Security HttpMethod.OPTION
Nothing, NHOTING worked for me!
is there something I’m missing?
Is there another way to send POST requests?
EDIT
As discussed, I modified the classes as follow:
WebSecurityConfig:
.antMatchers("/login").permitAll()
.anyRequest().authenticated()
.and()
// We filter the api/login requests
.addFilterBefore(new JWTLoginFilter("/login", authenticationManager()), UsernamePasswordAuthenticationFilter.class)
.addFilterBefore(new CORSFilter(), BasicAuthenticationFilter.class)
and implemented the CORSFilter as suggestet.
I also add the WebConfig class as suggested:
#Configuration
#EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:8000")
.allowedMethods("PUT", "POST");
}
}
Because of the empty string the login filter throws:
com.fasterxml.jackson.databind.JsonMappingException: No content to map due to end-of-input
this will be chatched by spring security which denied the access.
I also triyed to move the frontend server on other ports then 8000 (4200, 7000, etc.) with no success.

You need to enable Cors support in spring. In your WebConfig you can override addCorsMappings
#Configuration
#EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:4200"); //url of where angular is running.
}
}
This enables cors for the whole application. You can also be more specific with your mappings allowing specific header, and methods.
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://domain2.com")
.allowedMethods("PUT", "DELETE")
.allowedHeaders("header1", "header2", "header3");
}
You can also allow user #CrossOrgin at the class and method level
#CrossOrigin(origin = "http://domain2.com",
maxAge = 3600)
public class ApiController {
}
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/cors.html
https://spring.io/guides/gs/rest-service-cors/

I have used a CORS filter before, and it worked well:
public class CORSFilter extends OncePerRequestFilter {
#Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
response.addHeader("Access-Control-Allow-Origin", "*");
if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
response.addHeader("Access-Control-Max-Age", "1");
}
filterChain.doFilter(request, response);
}
}
and then add this to your config:
.addFilterBefore(new CORSFilter()), BasicAuthenticationFilter.class)

CORS not working in standalone tomcat

I am developing a web application in spring boot and I retrieve the data from the database and produce a Json list and send it to a url(Rest Web Services).Then I get it from a get request in the Javascript using getJSON.
$.getJSON(
'http://localhost:8080/dataurl?i=1',
function(data) {
}
But it works fine with embedded tomcat server and does not work with standalone tomcat server.The error I get is
It is only returning a empty JSON array when I access the url in browser.
Why is it not working in standalone tomcat server.Is it also possible to add oauth2 security to this?Any help is appreciated.

If you want to enable CORS you should create filter.
#Component
public class CorsConfig implements Filter {
private final Logger log = LoggerFactory.getLogger(CorsConfig.class);
public CorsConfig() {
log.info("SimpleCORSFilter init");
}
#Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me, Authorization");
chain.doFilter(req, res);
}
#Override
public void init(FilterConfig filterConfig) {
}
#Override
public void destroy() {
}
}
This will add necessary headers for CORS.

The problem was the with postgresql maven dependency.When I changed the dependency it worked.Hope it helps anyone

Angular $http to Web Api gives error of XMLHttpRequest -No 'Access-Control-Allow-Origin' header is present on the requested resource

I have read many questions and answers regarding Angular $http data service calling into another application Web Api. Yes I seen that some people say the reason "Postman" is allowed in is because its like 3rd party external app etc..
In the past I did have control of the Web Api in which i installed CORS etc..
However, I am thinking that something has to be POSSIBLE as several stackoverflow question and answers did indeed have answers that were giving me HOPE
Here is the error
XMLHttpRequest cannot load http://localhost:60127/api/Product/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60128' is therefore not allowed access.
Project with Web Api code
public class ProductController : ApiController
{
// GET api/<controller>
public IHttpActionResult Get() {
IHttpActionResult ret = null;
// ....
}
URL of Web api (works with Postman)
http://localhost:60127/api/Product/
Angular code
function productList() {
//http://localhost:60127/api/Product/
//dataService.get("/api/Product")
dataService.get("http://localhost:60127/api/Product/")
.then(function (result) {
vm.products = result.data; // result is an http status
debugger; // stop to see the code
},
function (error) {
handleException(Error);
});
}

In WebAPiConfig Class you need to enable Cors while registering WebAPiConfig
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.MapHttpAttributeRoutes();
config.EnableCors(new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*"));
}
}

have u enabled CORS? and add something like:
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class ProductController : ApiController
{
.....
}

If you have different origin for server and client , you need to set Access-Control-Allow-Origin header to true on server side,
response.getHttpHeaders().add("Access-Control-Allow-Origin", "*"); // will alow reuest from all API
So if you are using filter you can do like this
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
chain.doFilter(req, res);
}

AngularJS authentication with Spring Security CORS issues

I am using the tutorials on https://spring.io/guides/tutorials/spring-security-and-angular-js to connect AngularJS app to Spring Security backend for authentication.
When I try to log in (the username and password already exist in the backend), I get the following error in browser consoles (am testing my app in Chrome, Firefox and IE, all of them give me the same error).
The error is:
XMLHttpRequest cannot load http://SERVER_URL:4444/test/user.
Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.
The response had HTTP status code 401.
Code:
var auth = angular.module("Admin");
authService.service("AuthService", function($http, $rootScope){
this.login = function(credentials){
var headers = credentials ? {authorization: "Basic " + btoa(credentials.username + ":" + credentials.password)} : {};
$http.get("http://SERVER_URL:4444/test/user",{headers:headers})
.then(function(response){
console.log("success");
$rootScope.authenticated = true;
}, function(){
console.log("failed");
$rootScope.authenticated = false;
});
};
});
When I access the same link in the browser, I get authenticated box and I type in the username and password and I can see the result. But I don't understand why can't I access the same link via $http() successfully.
What is the correct way to do it? I have read numerous posts and Q&As but none solves the problem. I just don't understand what is going on.

You need to register a CORS filter in your Spring Security configuration on your backend to allow the origin of your Angular app access to the backend, since it is making cross-origin requests (it's not coming from the same host and port):
#Configuration
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {
#Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
final CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}
}
Alternatively, if you are using an older version of Spring Security that does not support CorsConfiguration you can accomplish the same thing by implementing a custom filter and injecting it into your filter chain:
#Component
public class CorsFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Allow-Headers", "*");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}

By default, the browsers have implemented the security policy, not to execute the scripts loaded from different domains. Even if it's from the same host and different port, it will not allow as it's violates the cross domain policy.
There are many ways to overcome this issue.
Best way is to enable the CORS at the server, so that from the first response onward, the server will instruct the browsers to allow to cross the domain. Refer the link to get more http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

JSESSIONID cookie not stored

I have a frontend written in angular which runs on localhost:3002.
I have a backend written with Spring-boot which runs on localhost:8080.
I added a filter to handle CORS (which I found on SO and adapted to my need) :
#Component
public class CORSFilter implements Filter {
#Override
public void init(FilterConfig filterConfig) throws ServletException {
}
#Override
public void doFilter(ServletRequest request, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "http://localhost:3002");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(request, response);
}
public void destroy() {}
}
When I authenticate, I can see that the server sends a cookie :
This cookie is not sent with the following requests. This results in 401 responses :
I looked at the "resources" panel of the chrome console and found out that no cookie were stored.
Any ideas?

In the file where you configure your $httpProvider, add this line to specify you want to send credentials with cross-site requests:
$httpProvider.defaults.withCredentials = true;
Typically, AngularJS will automatically send these cookies with requests (for same-origin requests) but since your requests are cross-site then you have to manually configure this.