CORS doesn't work with tomcat + javascript

Question

When sending a XMLHttpRequest

function requireCS(){
var http = new XMLHttpRequest();
var url = "url";
http.open("POST", url, true);

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Request", "categories");

http.onreadystatechange = function() {changes.
  if(http.readyState == 4 && http.status == 200) {
  }
}
http.send();
}

I get an error

XMLHttpRequest cannot load -serverurl-. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403. script.js:263 XHR failed loading: POST "-serverurl-".

I have the header set in web.xml

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

Cannot figure out whats wrong. Can you help me?

`Origin 'null' is therefore not allowed access`. Origin is usually `null` when you are accessing a html file from the file system - http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin. If you are not accessing the file from file system, it would help if you could provide the request and response headers. — maheshsenni, Dec 08 '16 at 17:28

score 0 · Answer 1 · answered Mar 01 '17 at 15:21

To get CORS to work with POST you must

Set content type (which you are aready doing)
Send a dummy payload (!)

For example, this JavaScript works for me with Chrome (v56 in OSX) and Tomcat v7.0.75:

            var url = "http://localhost:8080/MyServer/MyServlet/a/b";
            var req = new XMLHttpRequest();
            req.open("POST", url, true);
            req.setRequestHeader("Content-type", "application/octet-stream");
            req.onreadystatechange = function () {
                if (req.readyState == 4) {
                    var status = req.status;
                    var hundred = Math.floor(status / 100);
                    callback(hundred == 2);
                }
            };
            var dummyPayload = new Uint8Array(1);
            req.send(dummyPayload);

Here is my successful Tomcat CORS configuration in web.xml:

<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,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>*</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>180</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

I also got PUT to work with the above Tomcat config and the following JS:

            var url = "http://localhost:8080/MyServer/MyServlet/a/b";
            var req = new XMLHttpRequest();
            req.open("PUT", url, true);
            req.responseType = "text";
            req.onreadystatechange = function () {
                if (req.readyState == 4) {
                    var status = req.status;
                    var hundred = Math.floor(status / 100);
                    callback(hundred == 2);
                }
            };
            var text="Hello World";
            req.send(text);

I don't claim to understand why the above works. But if my POST and PUT examples work for you then you can adapt them to do what you want bit by bit.

CORS doesn't work with tomcat + javascript

1 Answers1