'Access-Control-Allow-Origin' error in Spring MVC + Zepto POST

Question

I'm trying to POST a JSON object to my Spring MVC controller, but I only receive an Access-Control-Allow-Origin error.

My controller:

@RequestMapping(value= "/add", method = RequestMethod.POST, headers = {"content-type=application/json"})
public @ResponseBody Reponse addUser(Model model, @RequestBody @Valid @ModelAttribute("user") User user, BindingResult result) {
    if (result.hasErrors()) {
        Reponse error = new Reponse();
        // etc......
        return error;
    } else {
        return service.addUser(user);
    }
}

My Zepto POST:

this.addUser = function (valeur, callback) {
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:8080/AgenceVoyage/user/add',
        data: JSON.stringify({"mail" : "toto@toto.fr" , "password" : "titi"}),
        dataType: "json",
        contentType: "application/json",

        success: function(data) {
            if(data.reponse == "OK") {
                window.location = "main.html";
            } else {
                alert("PROBLEM");
            }
        },

        error: function(xhr, type) {
            alert("ERROR");
        }
    });
};

I tried with no stringify in POST request, with no headers in @RequestMapping.

My result:

OPTIONS http://127.0.0.1:8080/AgenceVoyage/user/add No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. zepto.min.js:2 XMLHttpRequest cannot load

Answer 1

I found the solution :

Firstly, create a new filter, which will set the header response :

    @Component
public class SimpleCORSFilter 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", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}

After that, in your web.xml add those lines :

 <filter>
  <filter-name>cors</filter-name>
  <filter-class>MY.PACKAGE.SimpleCORSFilter</filter-class>
 </filter>

 <filter-mapping>
  <filter-name>cors</filter-name>
  <url-pattern>/*</url-pattern>
 </filter-mapping>

and that all !

Answer 2

This is because the page is being loaded from a server in http://localhost:9000, and this page is trying to access via an ajax request a different domain http://127.0.0.1:8080/AgenceVoyage/user/add.

Notice that the different port number makes these two urls correspond to two different domains, even tough they are both localhost urls.

Because the two are considered different domains, the browser ajax Same Origin Policy kicks in and prevents the request from being executed due to security reasons (ajax requests against third party domains are not allowed).

See here for more details on the ajax Same Origin Policy, specially the origin determination policy section where it's mentioned that the port number is part of the origin.

Answer 3

If your application is configured programmatically, then you need next code in your WebApplicationInitializer implementation instead of 'xml':

public class WebAppInitializer implements WebApplicationInitializer {

  @Override
  public void onStartup(ServletContext servletContext) {
      ... // your context configuration like in Spring.io tutorial

     // Register filter to allow cross-domain requests
     registerServletFilter(servletContext, new SimpleCORSFilter());
  }

  ...

  protected FilterRegistration.Dynamic registerServletFilter(ServletContext servletContext, Filter filter) {
    String filterName = Conventions.getVariableName(filter);
    FilterRegistration.Dynamic registration = servletContext.addFilter(filterName, filter);
    registration.setAsyncSupported(true);
    registration.addMappingForUrlPatterns(EnumSet.allOf(DispatcherType.class), false, "/*");
    return registration;
  }
}

if the filter is

@Component
public class SimpleCORSFilter 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", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
   response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
    chain.doFilter(req, res);
  }

  public void init(FilterConfig filterConfig) {}

  public void destroy() {}

}

Answer 4

Insert this annotation @CrossOrigin in class of controller

@CrossOrigin(origin = "http://domain2.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class UserController {

}

Font: https://dzone.com/articles/cors-support-spring-framework