CODEWITHSUNDEEP
nginxcorsjettyshiropreflight
Leszek Wiland
Leszek Wiland

Reputation: 11

CORS Error on Chrome

I don't see myself making a cross domain AJAX request. However, I am still getting a CROSS related error. This happens only on Chrome. Firefox and Safari work fine.

Error: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

The setup is:

  1. AngularJS SPA
  2. Nginx to serve static web content and as reverse proxy to forward https AJAX request as http request to local jettty/spring application
  3. Api exposed as part of spring application is protected using shiro library

General

Request URL:https://domainName.com/api/path
Request Method:OPTIONS
Status Code:401

Request Headers

:authority:domainName.com
:method:OPTIONS
:path:/api/path
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, sdch, br
accept-language:en-US,en;q=0.8
access-control-request-headers:accept, authorization, content-type
access-control-request-method:POST
origin:https://www.domainName.com

Response Headers:

content-length:0
date:Tue, 12 Jul 2016
server:nginx
status:401
www-authenticate:BASIC realm="application"

Any idea for the CORS error?

Upvotes: 1

Views: 862

Answers (2)

Leszek Wiland
Leszek Wiland

Reputation: 11

Finally, I got it fixed on the back-end side by providing the jetty server with a Cross Origin Filter configuration class. Some sample code below: 

DispatcherServlet dS = new DispatcherServlet();
dS.setContextClass(AnnotationConfigWebApplicationContext.class);
dS.setContextConfigLocation(String.format("%s",ApplicationConfig.class.getCanonicalName()));


final ServletHolder servletHolder = new ServletHolder(dS);
final ServletContextHandler context = new ServletContextHandler();
context.setContextPath("/");
context.addServlet(servletHolder, "/");

// cors
{

FilterHolder h = new FilterHolder(CrossOriginFilter.class);
h.setInitParameter(CrossOriginFilter.ALLOWED_ORIGINS_PARAM,"https://*.domainName");
h.setInitParameter(CrossOriginFilter.ALLOWED_METHODS_PARAM,"GET,POST,HEAD,OPTIONS");
h.setInitParameter(CrossOriginFilter.ALLOWED_HEADERS_PARAM,"*");
h.setInitParameter(CrossOriginFilter.PREFLIGHT_MAX_AGE_PARAM,"300");
h.setInitParameter(CrossOriginFilter.ALLOW_CREDENTIALS_PARAM,"true");
h.setInitParameter(CrossOriginFilter.EXPOSED_HEADERS_PARAM,"");
h.setInitParameter(CrossOriginFilter.CHAIN_PREFLIGHT_PARAM,"false");
h.setInitParameter(CrossOriginFilter.ALLOWED_TIMING_ORIGINS_PARAM,"https://*.domainName");
context.addFilter(h,"/*",EnumSet.of(DispatcherType.REQUEST));

}

Upvotes: 0

Saurabh Chaturvedi
Saurabh Chaturvedi

Reputation: 2166

This is basically due to a pre flight Op OPTIONS request that Chrome makes . It may be annoying at times . Better you use a library called Xdomain that is a CORS alternative. And it has Angular JS wrapper also . It is really an elegant solution for problems like this . Have a look https://github.com/jpillora/xdomain . Let me know if that helped you :) .

Upvotes: 1

Related Questions