CORS implementation/enabling for jQuery ajax application and tomcat server?

Question

Even though there are topics on CORS in hundreds, I couldn't find one what I want or nothing helped me to solve my issue.

My case is,

I have an application running on http://localhost:8011 which need to consume some services running on another server which is http://localhost:8022
I use jQuery(1.7.1) ajax to call the service in the other server as,

var Request = '<?xml version="1.0" encoding="UTF-8"?> \
                    <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> \
                      <SOAP-ENV:Body> \
                        <TicorRequest xmlns="urn:Ticor" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ServiceName="Quote_Gen"> \
                          <WorkDocuments> \
                            <Premium_details id="Premium_details_id_1"> \                            
                              <quote_components id="Quote_components_id_1"> \
                                <AAC_Membership>400000</AAC_Membership> \
                                <Adjustment_fee>2000</Adjustment_fee> \     
                              </quote_components> \
                            </Premium_details> \                            
                          </WorkDocuments> \
                        </TicorRequest> \
                      </SOAP-ENV:Body> \
                    </SOAP-ENV:Envelope>';

var TicorService = $.ajax({
                            type: "POST",
                            processData: false,
                            url: "http://localhost:8022/axis/services/Ticor",
                            data: Request,
                            beforeSend: function(xhr){xhr.setRequestHeader('SOAPAction', 'urn:Ticor'); },                                                 
                            xhrFields: { withCredentials: false },          
                            contentType: "text/xml; charset=\"utf-8\"",
                            crossDomain: true,                          
                            dataType: "xml",
                            success: function(data, status, req)
                            {
                              alert(data);
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown)
                            {
                              alert(errorThrown);
                            },
                            complete: function(XMLHttpRequest, textStatus)
                            {                           

                            }
                    });

But I a get the following error message in Chrome.

XMLHttpRequest cannot load http://localhost:8022/axis/services/Ticor. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8011' is therefore not allowed access. The response had HTTP status code 200.

Then I tried to add the following in the web.xml file in the Tomcat server (which is 7.0.42).

    <filter>
      <filter-name>CorsFilter</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
      </init-param>
      <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
      </init-param>
      <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
      </init-param>
      <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>10</param-value>
      </init-param>
    </filter>
    <filter-mapping>
      <filter-name>CorsFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

After adding the above I get the same error message but with The response had HTTP status code 403

Can you please let me know What I am missing here? or the alternatives?

score 1 · Answer 1 · edited May 23 '17 at 11:52

I had the same problem and found out that when requesting to different source origins on localhost in chrome always gives this error. I tried running in IE and then it worked fine. The solution I used to run in chrome was to disable the CORS - Security on chrome:

RUN --> Chrome.exe --disable-web-security

Here is a reference that says that chrome does not support localhost for CORS requests, see link: https://bugs.chromium.org/p/chromium/issues/detail?id=67743

Also see stackoverflow post: Deadly CORS when http://localhost is the origin

Beck Yang · Answer 2 · 2016-06-03T15:15:00.133

Your javascript perform xhr.setRequestHeader('SOAPAction', 'urn:Ticor'); to send a header SOAPAction. But this one isn't in cors.allowed.headers. You have to modify the filter config in web.xml:

<init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,Accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,SOAPAction</param-value>
</init-param>

Update

Change param-value accept to Accept.

CORS implementation/enabling for jQuery ajax application and tomcat server?

2 Answers2

Update