No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:1111' is therefore not allowed access

Question

I have a situation I can't really understand. Two computers, in one I'm using brackets for my Web development, in the other (Linux) I'm running Tomcat (7). Both are within the same LAN (and hence same address range). I'm getting the error shown in the title and hence I'm completely stuck. Tried the following code with no success:

var req = { url: l_url, method:"POST", headers: { 
                    'Content-Type': 'application/x-www-form-urlencoded' ,
    //                'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Origin': 'http://127.0.0.1',
                    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
                    'Access-Control-Allow-Headers': 'Content-Type, application/x-www-form-urlencoded'
                    }, data: l_params } ;

$http(req).
            success(function(data, status, headers, config) {
                console.log("DB_Services - Success; data is: " + JSON.stringify(data)) ;
                 l_deferred.resolve(data);
            }).
            error(function(data, status, headers, config) {
                console.log("DB_Services - Error: " + data) ;
                 l_deferred.reject(status);
            });
             return l_deferred.promise;

The error (Chrome's console) reads: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:58275' is therefore not allowed access.

My search brought me to the conclusion (not sure it is correct) that the Tomcat is rejecting the request, even though I included the above shown heading details.

I also found that it is possible to tell Tomcat to allow the request, but don't know how and where to configure that.

So, my questions are:

1) Is my http request properly phrased?

2) How do I make Tomcat to allow this request?

Thanks in advance for any suggestion.

Answer 1

You could try adding a filter class to your java code in the server side, sample code

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())) {
        //Add CORS "pre-flight" request
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
         response.addHeader("Access-Control-Allow-Headers", "Authentication-token");
        response.addHeader("Access-Control-Allow-Headers", "Content-Type");
        response.addHeader("Access-Control-Max-Age", "3600");
    }
    filterChain.doFilter(request, response);
}

}

add it to web.xml

<filter>
    <filter-name>cors</filter-name>
    <filter-class>location.of.filter.class</filter-class>
</filter>
<filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

and in in your angular js app config try adding

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

this had solved my problem, hope it will help you too.

Answer 2

You are running into what's known as the Same-Origin Policy. One of the core motives behind this policy is to prevent scripts that you didn't write (and thus are untrusted) from running on your page (and possibly taking data from it). Scripts that attempt to do that maliciously are doing what is known as Cross-Site Scripting.

To not run afoul of the Same-Origin Policy, your site must only ask for scripts from:

1. A site with the same protocol as your site
2. A site with the same hostname as your site
3. A site with the same port as your site

You'll notice this basically means only your site.

One newer method of getting around this restriction is to use Cross-Origin Resource Sharing (CORS). To do this you must have control of the code/servers for all the scripts you would like to run.

There is already good SO question/answer to get you started: Ways to circumvent the same-origin policy