Vue.jsでNode.jsサーバーを呼び出す

Question

私は単純なNode.jsサーバーを稼働させています。これはコードです：

var http = require('http'); 
var server = http.createServer(); 
server.on('request', function(req, res) { 
    res.writeHead(200, { 
     'content-type': 'text/plain' 
    }); 
    res.write('Hello World!'); 
    res.end(); 
}) 

server.listen(8090); 
server.once('listening', function() { 
    console.log('Hello World server listening on port %d', 8090); 
}); 

私は、コマンドラインからカールを使用して、このサーバーを呼び出すことができます。私はVueのアプリケーションから呼び出すしようとすると、

$curl localhost:8090 

はしかし、私はエラーを取得します。 localhost：8080で実行されているVueアプリケーションがあり、localhost：8090サーバーを呼び出すとします。マイmain.jsのVueのファイルはこれです：

import Vue from 'vue' 
import resources from 'vue-resource' 
Vue.use(resources) 

import App from './components/App.vue' 

import style from './styles/main.scss' 

/** 
* Root Vue instance 
* @param {[element]} el: 'body' [Adds to the html body] 
* @param {[component]} components: {app: App} [Renders ./component/App] 
*/ 
new Vue({ 
    el: 'body', 
    components: { 
    app: App 
    } 
}) 

をそして、これはアプリケーションコンポーネントです：

XMLHttpRequest cannot load localhost:8090. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

私は試してみてください。私はボタンをクリックすると

<template> 

<h1>{{ msg }}</h1> 

<input v-model="msg"> 
<button v-on:click="get">Call Server</button> 

</template> 

<script> 

export default { 
    data: function() { 
     return { 
      msg: 'Hello World!' 
     } 
    }, 
    methods: { 
     get: function() { 
      // GET request 
      this.$http({ 
       url: 'localhost:8090', 
       method: 'GET' 
      }).then(function(response) { 
       console.log('ok'); 
      }, function(response) { 
       console.log('failed'); 
      }); 
     } 
    } 
} 

</script> 

私はこのエラーを取得しますgoogle.comのような別のサーバーを呼び出すと、次のエラーが表示されます。

build.js:19188 GET http://localhost:8080/google.com 404 (Not Found)

それで、Vueは呼び出しの前にlocalhost：8080を置いているようですが、これは私の問題がある場所でしょうか？サーバコールをするのは全く新しいものです。私はVueで遊んでいて、Node.jsを学びたいと思っています。

Answer 1

場合は、リクエストヘッダ

を追加することができますまたはVueと、ブラウザ内のセキュリティがどのように実装されているかに関係しています。 CORSは回避策ではありません。 CORS to see why it is neededにお読みください。 This question of mineはあなたと非常に似ていますが、回答セクションにもいくつかの良い情報があります。 CORSを使用せずにAPIを呼び出すには、同じホスト、ポート、プロトコル上で実行する必要があります。それ以外の場合は、ブラウザによってブロックされます。

CORSの出現前には、同じことを達成するためにJSONPを使用する必要がありました。もちろん、これがどのように機能するか見てみることもできますが、今日ではCORSという形で適切なクロスドメインサポートがあるため、この手法はほとんど必要ありません。 「？Vue.jsで作業するとき、どのように人々がAPIの呼び出しん」、彼らは次のいずれかを実行にコメントセクションのいずれかであなたの質問について

：

1. 別のサーバー上でAPIを実行します（たとえば、 api.mydomain.com）、応答にCORSヘッダーを設定します。
2. 上記と同じですが、クライアントとサーバーは上記のJSONPメソッドを使用して応答をラップします。
3. 1つのサービスページと同じサーバーでAPIを実行します。つまり、エンドポイントに対してapiコールが行われることを意味します。localhost:8080/api
4. ＃3でツイストする：サーバー上で別のサーバーに入ってくるプロキシコールだけです。つまり、あなたのapiサーバーを別の場所で稼働させることができますが、/apiで電話を受けているメインサーバーは、/apiという接頭辞を取り除いた後、次のサーバーでこれらの要求を送信します。通常、アプリケーションサーバーの前にApacheまたはNginxのインスタンスを設定して実際のプロキシ処理を行いますが、node-proxyなどを使用してアプリケーションサーバーで行うこともできます。

おそらくこれはすでに行を介して読むことができますが、いくつかの問題（および時間）を省き、CORSを使用してください:) @trquoccuongは彼の答えでこれを行う詳細を持っています。

Answer 2

CORSの問題、あなたはcorsノードモジュールを使用するか、使用エクスプレス

res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); 
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With'); 

場合、これは基本的にノードとは何の関係もありません使用のHTTPモジュール

res.setHeader