'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" : "[email protected]" , "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.