2017-01-22 8 views
3

これは、以下のコードは、expressを使用してHTMLファイルにオブジェクトを送信する方法です。しかし、nodejsコードはHTMLファイルとは別のホストにあります。では、別のホストにあるHTMLファイルにJSONデータをどのように送信すればよいですか?JSONデータをノードjsスクリプトから別のサーバーのHTMLファイルに送信する方法

Node JS file code: 
app.get('/test', function(req, res, next) { 
    res.json({ message: 'Hello World' }); 
}); 


And HTML file code: 

$.ajax({ 
    url: '/test', 
    complete: function(data) { 
    console.log(data); 
    } 
}); 

答えて

2

いくつかを明確にしてください。

次のコードは、あなたが正しくないHTMLファイル

にオブジェクトを送信する方法です。

app.get('/test', function(req, res, next) { 
    res.json({ message: 'Hello World' }); 
}); 

ここには何がありますか?何かがrequest/testエンドポイントに送信します。ブラウザでも、別のサーバーでもかまいません。それはiPhoneでも、HTTPリクエストを作成できるものでも可能です。あなたがすでに持っているものを意味

{ message: 'Hello World' }

/test @GETあなたmessageオブジェクトに別のサーバのために十分である:response

はJSONオブジェクトです。

/testの応答はHTMLではありません。それはJSONです。ブラウザは表示に問題はありません。ページソースを表示すると、私の意味がわかります。

任意のサーバがhttp://example.com/testHTTPGETrequestを送ることができ、それは限り、あなたのサーバが(つまり、ドメインexample.com/testに要求することのみを許可)要求を制限するものではありませんとして応答としてmessage JSONを受け取ることになります。

クロスオリジンクライアントサイトは、あなたが別のドメイン(cross origin)にAJAX要求を送信する場合は、必ずサーバーが(表現)明示的にクライアントの原点を許可することを確認する必要があります

を要求します。

クライアント:

// From http://test.com 
$.ajax({ 
    url: 'http://example.com/test', 
    complete: function(data) { 
    console.log(data); 
    } 
}); 

サーバー:

// http://example.com 
app.get('/test', function(req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', 'http://test.com'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET'); 
    res.json({ message: 'Hello World' }); 
}); 

ブラウザ、デフォルトでは、あなたはそれがない限り、別のドメイン(原点)にAJAX要求を送信することはできません発信元の応答にはAccess-Control-Allow-Originヘッダーが含まれ、そのヘッダーによってブラウザーの発信元が許可されます。もしそのようなヘッダが存在しない場合、要求はデフォルトでブロックされると、コンソールに次のエラーが表示されます:

XMLHttpRequest cannot load http://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

+1

をしながら、これはエラーをスローするようにブラウザを防ぎありがとうございました! –

1

あなたはミドルウェア

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 
を使用してexpreessアプリでCORSを有効にする必要があります

クロスドメインAJAXリクエスト

how to enable cors in express

関連する問題