リクエストされたリソースエラーに「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 'はアクセスを許可されません。

どうすれば修正できますか？

私はこれかもしれないが、可能性の高いクロームがサポートされていないことになると信じlocalhostて行くことAccess-Control-Allow-Origin- を参照クローム問題

ChromeにAccess-Control-Allow-Originヘッダーを送信させるには、/ etc / hostsファイルのlocalhostを次のような他のドメインにエイリアスします。

127.0.0.1   localhost yourdomain.com

次に、のyourdomain.com代わりにを使用してスクリプトにアクセスする場合localhost、呼び出しは成功するはずです。

Google Chromeブラウザを使用している場合は、拡張機能でハッキングできます。

アプリケーションのオンザフライでCORSヘッダーを変更するChrome拡張機能を見つけることができます。明らかに、これはChromeのみですが、変更がまったくなく、どこでも機能することが好きです。

ローカルマシンでアプリをデバッグするために使用できます（すべてが本番環境で機能する場合）。

注意：URLが壊れた場合、拡張名はAccess-Control-Allow-Origin：*です。たとえば、YouTubeはこの拡張機能で動作しないため、作業をしていないときは、この拡張機能を無効にすることをお勧めします。

次のようにヘッダーを設定して、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

ちなみに、私はこの問題に当てはまると私が信じているjQueryドキュメントからこの情報に気づきました：

ブラウザのセキュリティ制限により、ほとんどの「Ajax」リクエストは同じオリジンポリシーの対象となります。リクエストは、別のドメイン、サブドメイン、ポート、またはプロトコルからデータを正常に取得できません。

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

Chromeでは、2つの異なるローカルホストを統合することはできません。そのため、このエラーが発生します。nuget managerからMicrosoft Visual Studio Web Api Coreパッケージを含める必要があります。WebApiプロジェクトの2行のコードをWebApiConfig.cs ファイルに追加します。

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

その後、すべて完了しました。

その呼び出しスプリングブートサービスの場合。以下のコードを使用して処理できます。

@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);
        }
    };
}

開発には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();

cors unblockはChrome 78に最適です[COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

「cors unblock」と呼ばれるgoogle chromeのプラグインです

概要： 有効な場合、ローカルおよびリモートのWebリクエストに「Access-Control-Allow-Origin：*」ヘッダーを追加することによるCORSエラーはもうありません

この拡張機能は、ブラウザーが受信するすべての要求にカスタムの「access-control-allow-origin」および「access-control-allow-methods」ヘッダーを提供することにより、XMLHttpRequestおよびフェッチメソッドを制御します。ユーザーは、ツールバーボタンから拡張機能のオンとオフを切り替えることができます。これらのヘッダーの変更方法を変更するには、右クリックのコンテキストメニュー項目を使用します。許可する方法をカスタマイズできます。デフォルトのオプションは、「GET」、「PUT」、「POST」、「DELETE」、「HEAD」、「OPTIONS」、「PATCH」メソッドを許可することです。また、サーバーがすでにヘッダーを埋めている場合に、これらのヘッダーを上書きしないように拡張機能に要求することもできます。

まあ、もう1つの方法は、cors プロキシを使用することです。URLの前にhttps://cors-anywhere.herokuapp.com/を追加するだけで、URLはhttps://cors-anywhere.herokuapp.com/httpのようになります。 ：//ajax.googleapis.com/ajax/services/feed/load。

プロキシサーバーは上記のURLからhttp://ajax.googleapis.com/ajax/services/feed/loadを受信します。次に、そのサーバーの応答を取得するように要求します。そして最後に、プロキシは

Access-Control-Allow-Origin: *

その元の応答に。

このソリューションは、開発と本番の両方で機能するため、優れています。要約すると、同一生成元ポリシーはブラウザーからサーバーへの通信でのみ実装されるという事実を利用しています。つまり、サーバー間通信で強制する必要はありません。

解決策の詳細については、CORSエラーを修正するための Medium 3 Waysをご覧ください。

要求されたリソースにChromeエラーヘッダーのソリューションが存在するため、Springブートコントローラー（クラスレベルまたはメソッドレベル）で使用@CrossOriginしてください。backendside'No 'Access-Control-Allow-Origin'

このソリューションは私のために100％働いています...

例：クラスレベル

@CrossOrigin
@Controller
public class UploadController {

-----または-------

例：メソッドレベル

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework