LINUX.ORG.RU

Vue клиент работает только локально

 , ,


0

1

Создал сервер:

const express = require('express');
const app = express();
const { m, baseClassId, baseObjId, types} = require('./base');
const Uuid = require('node-uuid');
const Express = require('express');
const Session = require('express-session');
const BodyParser = require("body-parser");
const cors = require('cors');

app.use(BodyParser.urlencoded({extended: false}));
app.use(BodyParser.json());
app.use(cors({
        origin: "http://localhost:8080",
        credentials: true,
        methods: "GET,POST,DELETE,PUT,OPTIONS",
        allowedHeaders:
            "Origin, X-Requested-With, Content-Type, Accept, authorization, x-xsrf-token"
    }));
app.use(Session({
    secret: 'abracodabra',
    resave: false,
    saveUninitialized: false,
    cookie: {maxAge: 60000 * 60},
    rolling: true,
}));

{Далее тут мои обработчики пост-запросов}

app.listen(3000, function () {
  console.log("API app started");

});

Моё простенькое Vue.js приложение, которое работает на 8080 порту и обращается с пост-запросами к localhost:3000 :

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
axios.defaults.withCredentials = true

Vue.prototype.$http = axios
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Локально в браузере всё работает. Но как только я пытаюсь подконектиться из сетки к моему серваку, то вебконсоль выдаёт следующее:

Во время загрузки страницы соединение с ws://192.168.0.123:8080/sockjs-node/030/2qnaoa5r/websocket было прервано. app.js line 2232 > eval:1683:9
[HMR] Waiting for update signal from WDS... log.js:24:4
"Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools" vue.runtime.esm.js:8353:1
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create app.js line 2291 > eval:2164:21
Error: Network Error
Стек-трейс:
createError@webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15
handleError@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:87:14

Как это победить?

Ответ на: комментарий от andman

Прочитай про CORS, там всё расписано.

Сервер у меня отправляет эти заголовки: «Origin, X-Requested-With, Content-Type, Accept, authorization, x-xsrf-token».

Ты хотел сказать «браузер»?

theNamelessOne ★★★★★ ()
Ответ на: комментарий от theNamelessOne

Нет не браузер:

кусок кода:

const cors = require('cors');

app.use(BodyParser.urlencoded({extended: false}));
app.use(BodyParser.json());
app.use(cors({
        origin: "http://localhost:8080",
        credentials: true,
        methods: "GET,POST,DELETE,PUT,OPTIONS",
        allowedHeaders:
            "Origin, X-Requested-With, Content-Type, Accept, authorization, x-xsrf-token"
    }));

модуль cors (https://github.com/expressjs/cors) оборачивает ответы моими указанными заголовками.

andman ()

Локально в браузере всё работает. Но как только я пытаюсь подконектиться из сетки к моему серваку

А ты во внешнем веб-обозревателе (который в сетке) какую URL-ку набираешь? Ну и в логи своего веб-сервера загляни.

vinvlad ()
Ответ на: комментарий от vinvlad

Нашёл ошибку во vue компоненте:

app.post('http://localhost:3000/api/objTree', async function(req,res) { ... }

Когда браузер был на локальном клиенте действительно всё работало.

Для браузера клиента другой машины из сетки, localhost:3000 это была его же машина, где естественно никакого сервера нет.

Вобщем поднял прокси на сервере и разрулил запросы между vue и сервером, теперь даже в CORS отпала необходимость.

andman ()
Ответ на: комментарий от andman

И запрос во vue выглядит теперь вот так:

app.post('/api/objTree', async function(req,res) {...}

andman ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.