2016-05-23 10 views
1

私はMEAN Stackを使用してWebアプリケーションを作成していますが、試しても検索しても解決できない問題が発生しました。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

私は、ExpressJSでパスポート/パスポート・フェイスブックを使用してログインしようとしています。私のブラウザのURLに書き込むと、localhost/api/auth/facebookすべて正常に動作します。

ただし、このようなHTMLコードで要素を作成した場合、<a href="/api/auth/facebook">Login with Facebook</a>404 pageになります(下記のnginxを参照)。 そして、このような角度の方法で試してみると、<button ng-click="login_fb()">Login with Facebook</button>のようにNo 'Access-Control-Allow-Origin' header is present on the requested resource.というエラーが表示されます。

私は<a href="...">要素を使うべきであると信じているが、私は、私は私のNodeJSサーバー上でCORSを有効にするので、私のnginxのスクリプトはこれで、それをブロックしていると思う:

server.all('/*', function (req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type"); 
    next(); 
}); 

私はあまりにも私のnginxのスクリプトを残しておきます(「<」内部ブロックを無視し、「>」):

worker_processes 4; 

events { 
    worker_connections 1024; 
} 

http { 

    upstream backend { 
     server 127.0.0.1:8080; 
    } 

    # To optimize the response of static files 
    sendfile on; 

    server { 
     # Listen to normal port 
     listen  80; 

     # Let through files like CSS, JPG, JS, ... 
     include mime.types; 

     # Alias for this server 
     server_name <my-domain>; 

     # Where the HTML files are located 
     root <my-folder>; 

     # Route for API calls 
     location /api/ { 
      proxy_pass http://backend; 
     } 

     # Route for the index 
     location ~ ^/*$ { 
      index index.html index.htm; 
     } 

     # Route for 404 page 
     error_page 404 /index.html; 

    } 

} 

EDIT:この<a href="http://localhost:8080/api/auth/facebook">Login with Facebook</a>のようなリンクを使用するが、それはハードコードされたURLを使用するように私を強制的に、私は最終的にドメインの下にこのアプリを入れます。

NEW EDIT:それはそれアンギュラルート思う、と私は$ routeProviderで宣言されていないので、それがないようにするには404

答えて

0

に私を取るので、私はこの<a href="/api/auth/facebook">Login with Facebook</a>のように使用することは動作しないことを実現404、あなたのリンク<a href="/api/auth/facebook">Login with Facebook</a>にtarget = "_ self"を追加してください。これは、角度ルータをバイパスします。

別の方法では、FB $ APIでCORSの同じ起点のポリシーによってブロックされている角型$ httpサービスを使用しているため、「アクセス制御許可型」を取得しないと思います。

リンク先に貼っておく必要があります。これを角度のある方で行いたい場合は、このプラグインをお勧めします:https://github.com/sahat/satellizer

関連する問題