Question

我只学习前端开发，最近才了解Nodejs的基础知识。我知道仅在Node.js中开发时，我会connect到某个端口号。但是，我对如何将Vue应用程序（使用Vue CLI构建）连接到后端感到困惑，因为npm run serve默认情况下会自动连接到端口8080 。

我的最终目标是将MongoDB连接到我的应用程序。我当前遇到的错误是Error: Can't resolve 'dns'。

TLDR：有人可以在新手术语中解释如何将Vue应用程序与MongoDB连接吗？

Answer 1

我认为您有两种解决方法：
首先，有一个名为devServer的字段，通过它可以调整运行npm run serve时启动的dev服务器的配置。具体来说，您要注意proxy字段，您可以使用该字段请求开发服务器将某些请求路由到您的节点后端。

第二，根据您的设置，您可以一起使用其他host来处理后端调用。例如，如上所述，默认情况下，开发服务器在8080上运行。您可以将节点后端设置为在8081上运行，并且您在VueJS应用中发出的所有后端请求将显式使用<host>:8081的主机。当您决定将代码投入生产并获得SSL证书时，可以使用Nginx这样的反向代理服务器将所有请求从api.example.com重定向到端口8081。

关于与MongoDB，IMO的连接，您应该问自己一个问题：
为客户提供直接访问数据库的安全性吗？
如果答案是肯定的，那么一定要确保mongoDB服务器在启用HTTP接口的情况下启动，设置一些访问限制，更新proxy和/或nginx，然后您就可以开始了

如果答案是否定的，那么您将不得不在NodeJS应用中编写轻量级的API端点。例如，您不是通过允许用户直接与数据库对话来获取特权列表，而是通过GET /api/privileges向NodeJS应用程序发出请求，然后NodeJS应用程序将与数据库进行通信以获取此权限。数据并将其返回给客户端。
后端与您的数据库而不是与客户端进行对话的另一个好处是，数据库实例的详细信息永远不会暴露给恶意客户端。

这是我在其中一个网站上的示例vue.config.js设置：

const proxyPath = 'https://api.example.com'

module.exports = {
  devServer: {
    port: 8115, // Change the port from 8080
    public: 'dev.example.com',
    proxy: {
      '/api/': {
        target: proxyPath
      },
      '/auth/': {
        target: proxyPath
      },
      '/socket.io': {
        target: proxyPath,
        ws: true
      },
      '^/websocket': {
        target: proxyPath,
        ws: true
      }
    }
  }
}

这是同一台开发服务器的nginx配置。我迅速从生产配置中撤出了我所能做的，并为安全起见模糊了某些领域。将此视为伪代码（伪配置？）。

server {
        listen 443      ssl;
        server_name     dev.example.com;
        root            "/home/www/workspace/app-dev";
        set             $APP_PORT "8115";

        location / {
                # Don't allow robots to access the dev server
                if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|Googlebot") {
                        return 404;
                }
                # Redirect all requests to the vue dev server @localhost:$APP_PORT
                proxy_pass $scheme://127.0.0.1:$APP_PORT$request_uri;
                proxy_http_version 1.1; 
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $http_connection;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

server {
        listen 443      ssl;
        server_name     api.example.com;
        set             $APP_PORT "8240";

        location / {
                # Don't allow robots to access the dev server
                if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|Googlebot") {
                        return 404;
                }
                # Redirect all requests to NodeJS backend @localhost:$APP_PORT
                proxy_pass $scheme://127.0.0.1:$APP_PORT$request_uri;
                proxy_http_version 1.1; 
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $http_connection;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

如何将Vue应用程序连接到服务器（Node，MongoDB）？

1 个答案: