Cross-Origin请求被阻止，angularjs休息调用jersey api

Question

I'm completely stumped. I am very new to AngularJS and I am trying to make a rest call to my jersey server api but I am having no luck. It works using curl or Advanced Rest client (Chrome browser add-on). However I recevied the following when attempting to hit my rest using my angularjs app..

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/JerseyDemos/rest/employees . (Reason: CORS header 'Access-Control-Allow-Origin' missing)."

CLIENT: snippet of my angularjs code

  $scope.login = function() {

This lets me connect to my server on a different domain
  $http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('username' + ':' + 'password');

  $http({method: 'GET', url: 'http://localhost:8080/JerseyDemos/rest/employees'}).
  success(function(data) {
    console.log(data)
  }).

SERVER: I am using jersey framework

Heres my CORS Filter...

import java.io.IOException;
import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;

public class CorsResponseFilter implements ContainerResponseFilter {

@Override
public void filter(ContainerRequestContext request,
                   ContainerResponseContext response) throws IOException {
    response.getHeaders().add("Access-Control-Allow-Origin", "*");
    response.getHeaders().add("Access-Control-Allow-Headers",
            "origin, content-type, accept, authorization");
    response.getHeaders().add("Access-Control-Allow-Credentials", "true");
    response.getHeaders().add("Access-Control-Allow-Methods",
            "GET, POST, PUT, DELETE, OPTIONS, HEAD");
}

}

Application class to register my CORS Filter

import com.howtodoinjava.jersey.provider.CorsResponseFilter;
import org.glassfish.jersey.filter.LoggingFilter;
import org.glassfish.jersey.server.ResourceConfig;
import com.howtodoinjava.jersey.provider.AuthenticationFilter;
import com.howtodoinjava.jersey.provider.GsonMessageBodyHandler;
public class CustomApplication extends ResourceConfig  {
public CustomApplication() 
{
    packages("com.howtodoinjava.jersey");
    register(CorsResponseFilter.class);
    register(LoggingFilter.class);
    register(GsonMessageBodyHandler.class);
    register(AuthenticationFilter.class);
}

}

Web.xml

<display-name>Archetype Created Web Application</display-name>

<servlet>
    <servlet-name>jersey-serlvet</servlet-name>
    <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
    <init-param>
        <param-name>javax.ws.rs.Application</param-name>
        <param-value>com.howtodoinjava.jersey.CustomApplication</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
    <servlet-name>jersey-serlvet</servlet-name>
    <url-pattern>/rest/*</url-pattern>
</servlet-mapping>

Employee rest snippet

@Provider
@Path("/employees")
public class JerseyService {
@Path("/all")
@RolesAllowed("ADMIN")
@GET
@Produces(MediaType.APPLICATION_JSON)
public Response getAllEmployees()
{
    Employees list = new Employees();
    list.setEmployeeList(new ArrayList<Employee>());

    list.getEmployeeList().add(new Employee(1, "Lokesh Gupta"));
    list.getEmployeeList().add(new Employee(2, "Alex Kolenchiskey"));
    list.getEmployeeList().add(new Employee(3, "David Kameron"));

    return Response.status(200).entity(list).header("Access-Control-Allow-Origin", "GET, POST, PUT, DELETE, OPTIONS, HEAD").build();
}

Answer 1

This is a very common error for people who are just getting started with Web Services, it's really simple to solve but sometimes developers spend hours struggling to find a solution. It happens when you create a web service and tries to access it from a different application, it won't work because you don't have Cross-Origin Resource Sharing (CORS) enabled, which means an application loaded in one domain cannot interact with resources from a different domain. All you have to do is to enable CORS.

How you can active it will depending on your scenario, in this tutorial I'm going to show how to enable CORS for a Java EE application running on Glassfish, I'm assuming you have an EJB RESTful web service similar to this one, and when other applications tries to consume it you see the Cross-Origin Request Blocked error on your firebug console, in this case all you have to do is to create a filter in your application, just create a class exactly like this one on your project:

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class CORSFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, 
            FilterChain filterChain) throws IOException, ServletException {
        final HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, HEAD, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, x-auth-token, "
                + "Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }

}

Now you have to register the filter in your web.xml, copy the following code and replace “yourPackage” with your actual package name:

<filter>
    <filter-name>cors</filter-name>
    <filter-class>yourPackage.CORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

That's it! Now your application will allow its resources to be shared with other domains.

Other Cross-Origin Request fix..