CORS 不适用于 tomcat + javascript答案

【问题标题】：CORS doesn't work with tomcat + javascriptCORS 不适用于 tomcat + javascript
【发布时间】：2017-04-24 00:28:03
【问题描述】：

发送 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 无法加载 -serverurl-。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null' 不允许访问。响应具有 HTTP 状态代码 403。 script.js:263 XHR 加载失败：POST “-serverurl-”。

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

无法弄清楚出了什么问题。你能帮帮我吗？

【问题讨论】：

Origin 'null' is therefore not allowed access。当您从文件系统 - stackoverflow.com/questions/8456538/… 访问 html 文件时，来源通常是 null。如果您没有从文件系统访问该文件，那么如果您可以提供请求和响应标头会有所帮助。

标签： javascript http tomcat xmlhttprequest cors

【解决方案1】：

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

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

例如，这个 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 示例对你有用，那么你可以一点一点地调整它们来做你想做的事情。

【讨论】：