Как сделать так, чтобы мой проект Vue.js webpack и функции Firebase работали на одном и том же порту? - PullRequest
Новая
       8

Как сделать так, чтобы мой проект Vue.js webpack и функции Firebase работали на одном и том же порту?

0 голосов
/ 25 июня 2018

Vue.js & Firebase

У меня интересная ситуация, когда я установил проект vue.js webpack через vue cli, а также проект Firebase с хостингом и функциями (приложение для узлового экспресса).

Порт 8080 и 5000

Теперь, если я запускаю проект Vue с npm run dev, то проект Vue собирается и запускается на localhost:8080. Что хорошо. У него горячая перезагрузка, он работает и делает то, что должен делать.

Но я хочу, чтобы проект Vue использовал функции Firebase для внутренних вызовов API. К сожалению, Firebase работает на localhost:5000.

Нарушение политики того же происхождения

Конечно, я мог бы использовать JSONP, но это просто глупо, поскольку для этого не было бы никаких причин, кроме удобства для разработчиков из-за этого несоответствия портов.

Когда я развертываю проект, он создает проекты Vue, помещает папку / dist в Firebase, и обе стороны - интерфейс Vue и функции Firebase (экспресс) - запускаются в одном домене на порту 80. Итак, в производстве это нормально. Но я хочу использовать среду разработки проекта Vue при разработке.

Есть идеи, как преодолеть эту проблему? Есть ли способ включить Vue: 5000 или Firebase: 8080? Возможно, есть и другие предложения?

Ответы [ 3 ]

0 голосов
/ 21 августа 2018

Добавьте поддержку CORS в ваше экспресс-приложение, чтобы избавиться от того же нарушения политики происхождения

Вот пример кода (не мое создание)

Убедитесь, что вы добавили переменную среды CORS_URLS, чтобывы принимаете * в производстве 

let express = require('express')
let cors = require('cors')

const app = express()
const corsUrls = (process.env.CORS_URLS || '*').split(',');

  app.use(cors({
    origin: (origin, cb) => cb(null, corsUrls.includes('*') || corsUrls.includes(origin)),
    credentials: true,
  }))
0 голосов
/ 28 января 2019

Если вы используете vue cli 3, вы можете настроить прокси, чтобы разрешить перенос вызовов на порт firebase.

https://cli.vuejs.org/config/#devserver-proxy

If you want to have more control over the proxy behavior, you can also use an object with path: options pairs. Consult http-proxy-middleware

for full options:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}
0 голосов
/ 25 июня 2018

Когда вы запускаете firebase serve --help, вывод будет таким: 

Usage: serve [options]

start a local server for your static assets

Options:

-p, --port <port>   the port on which to listen (default: 5000) (default: 5000)
-o, --host <host>   the host on which to listen (default: localhost) (default: localhost)
--only <targets>    only serve specified targets (valid targets are: functions, hosting)
--except <targets>  serve all except specified targets (valid targets are: functions, hosting)
-h, --help          output usage information

Обратите внимание, что вы можете использовать --host и --port, чтобы изменить место его подачи.

...