web-dev-qa-db-ja.com

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

AngularJSでomniauth-facebookを使用していますが、CORSが正しく機能していません。

私のomniauth.rbは

Rails.application.config.middleware.use OmniAuth::Builder do
provider :facebook,"xxxxx", "xxxxx",
:scope => 'email,user_birthday,read_stream', :display => 'popup'

end

Railsアプリおよびリクエストとして使用すると、すべてが機能します。しかし、Angular JSを介して 'http：\ localhost：3000\users\auth\facebook "を呼び出そうとすると

$http.get('/users/auth/facebook').success(function(data, status, headers, config) {
            console.log("back in success");
            }).
            error(function(data, status, headers, config) {

            });
    }

jSコンソールに次のエラーが表示されます

XMLHttpRequestをロードできません https://www.facebook.com/dialog/oauth?client_id=xxxx&display=popup …thday％2Cread_stream＆state = 3352c1924bdbc9277f7b1070c38d67acf79b529f198323cb。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin 'http://localhost:3000'はアクセスを許可されていません。

（URLはコンソールに完全には表示されません）

次の行を追加しました

config.middleware.insert_before Warden::Manager, Rack::Cors

しかし、これもうまくいきませんでした。

OmniAuthのヘッダーを上書きする最善の方法は何ですか？

私はAngularjsとgem devise、omniauth-facebookを使用しています

ruby-on-railsangularjsruby-on-rails-3.2omniauth
17
harshit

開発環境を使用しているため、ブラウザーを非セキュアモードで実行できるようにして、回避策を試してください。

Chrome Windowsの場合、CMDから試してください：

> cd C:\Program Files (x86)\Google\Chrome\Application
> chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

--disable-web-securityフラグを使用すると、クロスドメインリクエストを行うことができます。 --user-data-dirフラグを使用すると、開発用に新しいセッションを開くことができますonly.

これは開発作業の単なる回避策！このセッションで本番環境で使用したり、他のサイトに移動したりしないでください！

4
miguelr

問題は、Javascriptがクロスドメインリクエストを作成できないことです。これはセキュリティ上の理由で行われるため、スクリプトはリモートサーバーを呼び出して機密データを公開することはできません。

以下に、非常に優れた簡単な説明へのリンクと、その回避方法に関するいくつかのオプションを示します。

http://developer.yahoo.com/javascript/howto-proxy.html

そして、これにはいくつかの良い情報もある以前の回答があります：

なぜ「OriginはAccess-Control-Allow-Originによって許可されていません」というエラーが表示されるのですか？

1
Nick Karpov

ヘッダーが設定されていない場合、ヘッダーを強制することはできません。おそらく [〜＃〜] jsonp [〜＃〜] を使用する必要があります。ただし、Cookieを削除する人はほとんどいないので、サーバーを介したミラーリングは、訪問ごとに最大1回、ユーザーごとに1回しか処理する必要がないため、それほど悪くはありません。

0
BWStearns

問題は、あなたがhttpsであるあなたのサイトのfacebookであるhttpセキュアサイトからデータを取得しているため、最新のブラウザがクロス許可Originをサポートしていないことです。

唯一の解決策は、サイトでhttpsをサポートすることです。

0
rk1729

ApplicationController.rbに追加します

  def set_access_control_headers
    headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
  end
0
chrichar

browser.IEがデフォルトでクロスオリジンリクエストを許可しているために、この問題が発生する場合があります。 chromeでは、「Allow-Control-Allow-Origin：*」であるプラグインを1つ追加して有効にする必要があります。

0
radhika gavali

CORSの場合、サーバー側でクロスオリジンリクエストからアクセスするドメインをホワイトリストに登録する必要があります

    headers['Access-Control-Allow-Origin'] = '*'
//star will allow all the domain you can specify also which url u want to access

クライアント側では、config（）のヘッダーを次のように設定する必要があります。

   $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
   $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
0
Ajeet Lakhani

サーバーで「Access-Control-Allow-Origin」を設定すると、トラックが作成されます。お気に入り： Ruby headers['Access-Control-Allow-Origin'] = '*' Railsで。

0
realwol