使用 heroku 从 vue 应用程序对 server.js 进行 ajax 调用答案

【问题标题】：Do an ajax call to server.js from a vue app, using heroku使用 heroku 从 vue 应用程序对 server.js 进行 ajax 调用
【发布时间】：2020-02-02 14:46:16
【问题描述】：

我已成功完成本教程：

https://medium.com/p/a69845ace489/responses/show

现在，我如何使用 vue axios 从我的 dist 目录执行 ajax 调用 到我的 server.js 节点文件？

因为 heroku 正在为我与 process.env.PORT 的连接提供随机端口。

这是我在 main.js 中的服务器配置，在 vue.js 应用程序中，在 dist 目录中：

Vue.server = Vue.prototype.server = "https://myapp.herokuapp.com/";

请注意没有端口，因为我不知道heroku使用哪个端口。

这是一个 axios 随机调用，来自 vue.js 应用程序

axios.post(Vue.server + "getUser", {id: this.id})
    .then(response => {
        this.user = response.data;
    })
    .catch(function (erreur) {
        console.log(erreur);
    });

这是我的 server.js 文件：

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);console.log('server started '+ port);

我的问题是我的 vue 应用程序中无法设置端口，所有其余代码都在工作，我不包括节点休息的东西。

你认为保持 localhost 作为 Vue.server 变量可以在线工作吗？谢谢你

第 2 部分：

像这样更改了我的 server.js 文件，添加了一个 getUsers 发布网络服务：

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
const mongodb = require("mongodb");
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 80;

const cors = require("cors");

app.use(cors());

app.post("/getUsers", function(req, res) {
   res.send('ok');
});

app.listen(port);
console.log('server started '+ port);

现在这是我的 Helloworld.vue ：

import axios from "axios";
axios.defaults.withCredentials = true;
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },methods: {
    getUsers: function () {

            axios
                .post("http://localhost/" + "getUsers", {
                })
                .then(response => {
                   console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        },
    created: function () {
        this.getUsers();

    }
}
</script>

2.5：在我的本地主机服务器上，一切运行良好，ajax 调用完全没有 CORS 错误：

node server.js

将其上传到 HEROKU：

git push heroku 大师

这是错误：

跨域请求被阻止：同源策略不允许在http://localhost/getUsers 读取远程资源。（原因： CORS 请求未成功）。

【问题讨论】：

为什么需要知道端口？如果您的服务器已启动，并且您可以在浏览器中访问它，那么您就完成了。根据定义，就您的客户端（例如浏览器）而言，您的服务器在端口 80 上运行，即使 internal 端口不是端口 80。您显示的错误与端口，以及与您尝试发布到localhost 的事实有关的一切，而不是您在heroku 上设置的实际域。首先发布到/getUsers，而不是http://localhost/getUsers
感谢它现在正在工作！将 .post("localhost") ... 更改为 .post("vuestarter2.herokuapp.com/") ... 并且不再出现错误，我正确收到了“ok”消息，非常感谢 Mike！问题是当我在本地主机上工作时，我仍然需要在我的 VUE 应用程序中切换服务器名称，我是否必须在我的包 .json .scripts 文件中设置它？何对不起，我看到你说只输入 getUsers 我正在尝试这个。
从发布到 /getUsers 开始，而不是 localhost/getUsers，它可以完美地在线和在本地主机上运行，无需更改任何其他内容，非常感谢 Mike，这是正确的答案。
让我把它变成你的答案，尽管再次删除可能更有意义，因为它比其他任何东西都更接近拼写错误 =)

标签： node.js vue.js heroku

【解决方案1】：

您的代码当前将 POST 位置硬编码为 localhost，这保证不能在 heroku（或任何其他托管服务）上运行。

相反，甚至不要硬编码“正确的域”，只需直接 POST 到 /getUsers，没有任何明确的域，浏览器会做正确的事情，不管你在哪个域（命名，纯 IP ，WLAN，LAN，它会工作的）。

【讨论】：