javascript - CORS 不适用于 tomcat + javascript

Question

发送 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();
}

我得到一个错误

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

我在 web.xml 中设置了 header

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

无法找出问题所在。你能帮帮我吗？

Answer 1

要使 CORS 与 POST 一起工作，您必须

1. 设置内容类型(您正在做的)
2. 发送一个虚拟负载 (!)

例如，这个 JavaScript 适用于 Chrome(OSX 中的 v56)和 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);

这是我在 web.xml 中成功的 Tomcat CORS 配置:

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

我还使用 PUT 来处理上述 Tomcat 配置和以下 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);

我并没有声称理解上述方法为何有效。但是，如果我的 POST 和 PUT 示例适合您，那么您可以调整它们一点一点地执行您想要的操作。