javascript - 使用 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);
});

我可以从命令行使用 curl 调用此服务器:

$curl localhost:8090

但是，当我尝试从 Vue 应用程序调用它时，出现错误。我有一个在 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
  }
})

这是 App 组件:

<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>

当我点击按钮时出现这个错误:

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

当我尝试调用另一台服务器(如 google.com)时，出现此错误:

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

所以看起来 Vue 将 localhost:8080 放在调用前面，也许这就是我的问题所在？进行服务器调用对我来说是全新的，我只是在玩 Vue 并想在这样做的同时学习 Node.js。

Answer 1

这基本上与 Node 或 Vue 无关，而与浏览器中的安全性实现方式有关。 CORS 不是解决方法。继续阅读 CORS to see why it is needed . This question of mine ，与您的非常相似，在答案部分也有一些很好的信息。为了能够在不使用 CORS 的情况下调用 API，它需要在相同的主机、端口和协议(protocol)上运行，否则它会被浏览器阻止。

多年前，在 CORS 出现之前，您需要使用 JSONP实现相同。您当然可以看一下它是如何工作的，但现在很少需要这种技术，因为我们以 CORS 的形式提供了适当的跨域支持。

关于“人们在使用 Vue.js 时如何调用 API？”的评论部分之一中的问题，他们会执行以下操作之一:

1. 在另一台服务器(例如 api.mydomain.com)上运行 API，但在响应中设置 CORS header 。
2. 同上，但客户端和服务器使用上述 JSONP 方法包装响应。
3. 在与服务页面相同的服务器上运行 API。这意味着 api 调用将针对端点完成，例如 localhost:8080/api
4. 第 3 点的转折点:仅将来自服务器的调用代理到另一台服务器。这意味着你可以让你的 api 服务器在别处运行，但是你的主服务器正在接受 /api 上的调用，只会在剥离 /api 后在下一个服务器上发送这些请求> 前缀。通常，人们要么在你的应用服务器前面设置一个 Apache 或 Nginx 实例，然后在上面做实际的代理，但你也可以在你的应用服务器上做，使用像 node-proxy 这样的东西。 .

您可能已经可以通过这些行阅读此内容，但可以为自己省去一些麻烦(和时间)，只需使用 CORS :) @trquoccuong 在他的回答中提供了有关执行此操作的详细信息。