CODEWITHSUNDEEP
javajquerytomcatcorsjax-rs
Tarun Mohandas
Tarun Mohandas

Reputation: 785

How to enable CORS while sending $.get requests from jquery?

I have set up a Tomcat 9 server hosting my API code. It is working fine when I call it from postman. I have also added the following filter to the Tomcat conf/web.xml file:

<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
</filter>

I am using the following jQuery code for sending a GET request:

$(document).ready(function()
{
    $.get("http://localhost:8080/myapp/webapp/cars", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
});

It throws the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Is there anything I should do more on the server side to allow cross-origin requests?

How do I modify the above jQuery request to get rid of this error?

Many other posts have suggested to use an ajax method call with dataType:"jsonp"? Is it possible to somehow make that modification to the above $.get method? If not, please give example of a GET and POST to enable CORS using the ajax method.

EDIT

I also tried with following configuration:

<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>

…but it’s still not working.

Upvotes: 1

Views: 703

Answers (1)

Philipp
Philipp

Reputation: 1298

You have to add the headers when handling/creating the response with Tomcat.

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");

Response to the question Where do I add this:

You add it when you prepare your response for your servlet (i.e., the appropriate method, in the following example POST):

public class MyServlet extends HttpServlet {

    @Override
    public void doPost(final HttpServletRequest request, 
                       final HttpServletResponse response) throws ServletException {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }
}

If you don't have any servlet implemented and you want to do it via configuration (e.g., init-parameters) you may also be able to add it to your init-parameters, but make sure to have all there headers Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers set, with the appropriate content.

If it's still not working it would help to see the headers that are set in the response, to determine which header may be set incorrectly.

Upvotes: 1

Related Questions