Question

Vue.js和Firebase

在这种情况下，我通过vue.js webpack安装了一个vue cli项目，以及一个具有托管和功能的Firebase项目（一个节点快速应用程序）。

端口8080和5000

现在，如果我使用npm run dev运行Vue项目，则Vue项目将在localhost:8080上构建并运行。没关系它具有热重载功能，可以运行并完成所需的操作。

但是，我希望Vue项目将Firebase的功能用于其后端API调用。可悲的是，Firebase在localhost:5000上运行。

违反同源政策

当然，我可以使用JSONP，但这很愚蠢，因为端口不匹配，除了开发人员方便之外，没有其他理由。

当我部署项目时，它将构建Vue项目，将/ dist文件夹推送到Firebase，并且Vue前端和Firebase功能后端（快速）都在端口80的同一域上运行。因此，在生产中很好。但是我想在开发时使用Vue项目的开发环境。

关于如何解决此问题的任何想法？ 有没有办法让Vue在：5000上运行或Firebase函数在：8080上运行？可能还有其他建议吗？

Answer 1

运行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更改其投放位置。

Answer 2

为您的快速应用程序添加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,
  }))

Answer 3

如果您使用的是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>'
      }
    }
  }
}

如何在同一个端口上同时运行Vue.js Webpack项目和Firebase函数？

3 个答案: