web-dev-qa-db-ja.com

要求されたリソースエラーに 'Access-Control-Allow-Origin'ヘッダーがありません

私はニュースサイトのフィードを取得しようとしています。私はGoogleのフィードAPIを使ってfeedburnerフィードをjsonに変換したいと思いました。次のURLは、フィードから10件の投稿をjson形式で返します。 http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

上記のURLの内容を取得するために次のコードを使用しました

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

しかし、それは動作していないと私は次のエラーが出ています

XMLHttpRequestが読み込めません http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi 。要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。オリジン ' http：// localhost 'はアクセスを許可されていません。

これをどのように修正しますか？

javascriptjqueryjsonajaxcors
83
Aneeez

これはおそらく、ChromeがAccess-Control-Allow-Originを通過するためのlocalhostをサポートしていないためと思われます - Chromeの問題を参照してください

ChromeがヘッダにAccess-Control-Allow-Originを送信するようにするには、/ etc/hostsファイルのlocalhostを他のドメインにエイリアスするだけです。

127.0.0.1   localhost yourdomain.com

localhostではなくyourdomain.comを使用してスクリプトにアクセスした場合は、呼び出しは成功するはずです。

77
thanix

Google Chromeブラウザを使用している場合は、拡張子を付けてハッキングすることができます。

あなたは Chrome拡張 を見つけることができますそれはあなたのアプリケーションでその場でCORSヘッダを変更します。明らかに、これはChromeのみです、しかし私はそれが全くどこでもゼロ変更で動作するのが好きです。

ローカルマシンであなたのアプリをデバッグするためにそれを使うことができます（すべてが本番環境でうまくいくなら）。

通知 ：URLが壊れた場合の拡張子名はAccess-Control-Allow-Origin：*です。たとえば、youtubeはこのエクステンションでは動作しないため、自分のものに取り組んでいないときはこのエクステンションを無効にすることをお勧めします。

102
dkruchok

これを試してください - 次のようにヘッダを設定してAjax呼び出しを設定します。

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

次に、次のコマンドラインでChromeを開いてコードを実行します。

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
9
Mackander Singh

ちなみに、私はこの問題に当てはまると思うjQueryのドキュメントからこの情報に気付きました。

ブラウザのセキュリティ制限により、ほとんどの "Ajax"リクエストは 同じOriginポリシー の影響を受けます。要求は、異なるドメイン、サブドメイン、ポート、またはプロトコルからデータを正常に取得できません。

Hostsファイルを@thanixのように変更してもうまくいきませんでしたが、@ dkruchokで言及されている拡張子で問題は解決しました。

1
vancy-pants

開発では https://cors-anywhere.herokuapp.com を使用できます。本番環境では独自のプロキシを設定することをお勧めします

async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();
0
Kamil Kiełczewski

その春のブートサービスを呼び出している場合。あなたは以下のコードを使ってそれを扱うことができます。

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
                    .allowedHeaders("*", "Access-Control-Allow-Headers", "Origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}
0
Om.