通过AJAX从Apache调用Cocoon违反了同源策略

Question

我已经阅读了几篇关于 AJAX/JSONP 的文章，我可以通过 localhost 上提供的页面中的 AJAX 调用成功地从 Yahoo！ API 检索 JSONP 数据，但我无法从 localhost 上的 Cocoon 获取数据。

我有一个来自 Apache 的网页 localhost：80。该页面包含 AJAX 代码，用于从本地主机获取一些 JSONP：8080/cocoon/test/

当我直接加载本地主机：8080/cocoon/test/时，我得到预期数据：

{"titles":[
  {"title":"Title 1"}, 
  {"title":"Title 2"}, 
   ... , 
  {"title":"Title 999"}
]}

但是当我执行以下操作时：

function getTitles() {
    var url = "http://localhost:8080/cocoon/test/";
   $.getJSON(url, function(response) {
        console.log(JSON.stringify(response));
    });
}

我得到：

"跨源请求被阻止：同源策略不允许读取本地主机：8080/cocoon/test/上的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。

有谁知道为什么上面的 AJAX 代码适用于 Yahoo！ url（下面），但不适用于本地主机上的 cocoon？

感谢您对此的任何想法/指导。

Yahoo！： http://query.yahooapis.com/v1/public/yql?q=select%20name%20from%20geo.states%20where%20place%3D%22United%20States%22%20%7C%20sort（field%3D%22content%22）%20&format=json

Answer 1

花了一段时间，但我解决了 CORS 问题。

如果您从 Apache HTTP 服务器提供服务，请将以下内容添加到您的 httpd.conf 文件中：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

如果您通过 Tomcat 提供服务，请将以下内容添加到您的 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>