0

AJAX/JSONP に関するいくつかの投稿を読みましたが、Yahoo! から JSONP データを正常に取得できます。localhost で提供されるページで AJAX 呼び出しを介して API を呼び出しますが、localhost の Cocoon からデータを取得できません。

localhost:80 で Apache から Web ページを提供しています。このページには、localhost:8080/cocoon/test/ から JSONP を取得するための AJAX コードが含まれています。

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

4

1 に答える 1

0

少し時間がかかりましたが、CORSの問題を解決しました。

Apache HTTP Server からサービスを提供している場合は、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>
于 2014-11-21T17:02:38.920 に答える