Вызов Cocoon через AJAX из Apache нарушает политику того же происхождения

Question

Я прочитал несколько сообщений в AJAX/JSONP и могу успешно получать данные JSONP из Yahoo! API через вызов AJAX на странице, обслуживаемой на localhost, но я не могу получить данные от Cocoon на localhost.

У меня есть веб-страница, обслуживаемая Apache на localhost:80. Страница содержит код AJAX для получения JSONP от localhost:8080/cocoon/test/

Когда я загружаю localhost: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));
    });
}

Я получил:

"Запрос перекрестного источника заблокирован: политика одного источника запрещает чтение удаленного ресурса по адресу localhost:8080/cocoon/test/. Это можно исправить, переместив ресурс в тот же домен или включив CORS".

Кто-нибудь знает, почему код AJAX выше работает с Yahoo! URL (ниже), но не с коконом на localhost?

Спасибо за любые мысли / рекомендации по этому вопросу.

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.

Если вы используете HTTP-сервер Apache, добавьте в файл 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>