Выполните ajax звонок на сервер. js из приложения vue, используя heroku - PullRequest
0 голосов
/ 02 февраля 2020

Я успешно прошел этот урок:

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

Теперь, как мне сделать ajax вызов из моего каталога dist используя vue ax ios для моего сервера. js файл узла?

Поскольку heroku предоставляет случайные порты для моего соединения с process.env.PORT.

Это моя конфигурация сервера в main. js, внутри приложения vue. js, внутри каталога dist:

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

Обратите внимание, что нет порта, потому что я не могу знать, какой порт используется heroku.

Это случайный звонок ios из приложения vue. js

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

Это мой сервер. js file:

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

Изменен мой сервер. 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 pu sh heroku master

Это ошибка:

Запрос кросс-источника заблокирован: та же политика происхождения запрещает чтение удаленного ресурса на http://localhost/getUsers. (Причина: запрос CORS не выполнен).

1 Ответ

1 голос
/ 02 февраля 2020

Ваш код в настоящее время имеет местоположение POST, жестко закодированное в localhost, которое гарантированно не будет работать на heroku (или любом другом хостинге в этом отношении).

Вместо этого даже не используйте жесткий код "the "правильный домен", просто отправьте напрямую /getUsers, без какого-либо явного домена, и браузер будет делать все правильно, независимо от того, в каком домене вы находитесь (по имени, обычный IP, WLAN, LAN, он просто будет работать).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...