Calling a Node.js server with Vue.js
<p>I have a simple Node.js server up and running. This is the code:</p>

<pre><code>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);
});
</code></pre>

<p>I can call this server using curl from the command line:</p>

<pre><code>$curl localhost:8090
</code></pre>

<p>However, when I try to call it from a Vue application, I get an error. I have a Vue application running on localhost:8080, and I want to call my localhost:8090 server. My main.js Vue file is this:</p>

<pre><code>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
  }
})
</code></pre>

<p>And this is the App component:</p>

<pre><code>&lt;template&gt;

&lt;h1&gt;{{ msg }}&lt;/h1&gt;

&lt;input v-model="msg"&gt;
&lt;button v-on:click="get"&gt;Call Server&lt;/button&gt;

&lt;/template&gt;

&lt;script&gt;

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

&lt;/script&gt;
</code></pre>

<p>When I click the button I get this error:</p>

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

<p>When I try to call another server, like google.com, I get this error:</p>

<blockquote>
  <p>build.js:19188 GET <a href="http://localhost:8080/google.com" rel="noreferrer">http://localhost:8080/google.com</a> 404 (Not Found)</p>
</blockquote>

<p>So it seems like Vue is putting the localhost:8080 in front of the call, and maybe this is where my problem lies? Making server calls is completely new to me, I'm just playing around with Vue and want to learn Node.js while I do so.</p>