Webpack - 关闭对 /sockjs-node/info 的请求或指定不同的端口

Posted 2023-02-22

【中文标题】Webpack - 关闭对 /sockjs-node/info 的请求或指定不同的端口

【英文标题】：Webpack - turning off requests to /sockjs-node/info or specifying a different port

【发布时间】：2021-03-23 11:58:35

【问题描述】：

我将 Django 和 Vue 一起运行，并且组合效果很好。 Django 在 http 8000 上运行，webpack 开发服务器在 3000 端口上运行，JS 或 Vue 更改会自动编译，我只需要重新加载页面（这不是 SPA 应用程序）。

Django-webpack loader 用于通过以下标签提供捆绑包：

<script type="text/javascript" src="http://localhost:3000/static_src/bundles/pssystem/data.js" ></script>

我不使用 Vue-CLI，也无意从 Django 迁移到 Node 前端。

生活很好，其他一切都很好。

唯一烦人的是重复这样的请求：

http://localhost:8000/sockjs-node/info?t=1607750560606

这是 devtools 为 host:port 请求显示的内容。应用程序在 8000 w。 Django，将 3000 与 devServer 捆绑在一起，socksjs 也需要在 3000 上。

现在，Django 找不到该资源，因此它的日志中出现 404 混乱。我实际上编写了 410，但是，不，Vue 只是要 ping 和 ping 和 ping 那个 410。

#urls.py
url("^sockjs-node/info", views.nodeinfo),

#views.py
def nodeinfo(request):
    return HttpResponseGone()

现在，我试图寻找这个。 Vue 论坛上的答案是多方面的，其中大部分涉及更改为 vue.config.js，位于 package.json 旁边。

更新：由于我没有使用 Vue-cli，因此设置似乎需要进入 webpack.config.js。

在尝试了 2 或 3 条建议后，其中大部分似乎没有多大意义（例如，本地主机问题以包含指向 0.0.0.0 的 devserver 条目的“修复”结束），没有一个他们工作。

devServer 没有帮助的配置：

    hot: false,
    port: 3000
;

public: 'localhost:3000'

sockPort: 3000

sockPort: 3000,sockHost: 'localhost'

inline: false

我所看到的主题似乎都没有非常权威的答案。或者，更有可能的是，我在所有发布的噪音中都找不到正确答案。

（我确实看到有人建议通过添加 --no-inline 标志来更改 webpack 命令，但还没有尝试过）。

我不会在生产中运行节点，只会运行 webpack 捆绑到静态文件。我不在乎这里的https。我也不关心通过重新配置东西来让 sockjs 工作 - 事情工作得很好，没有任何遗漏，所以关闭它不会有坏处。

我只希望这些请求停止从客户端代码发出。完全。我该怎么做？

(PS 如果您想回答，请说明您提出的 vue.config.js 内容是如何解决问题的 - 我刚刚看到太多解决了它 em> 没有关于配置内容如何关闭此功能的任何信息。这意味着使用该解决方案的人不理解它并使用复制和祈祷编程）。

版本：

vue@2.6.11
webpack-dev-server@3.11.0
npm --version 6.14.6
node --version v10.15.0

最后但同样重要的是，这些是我的 webpack 目标：

观看每当我更改 JS/Vue 文件时在服务器上重新编译，3000 上的包都会刷新。

主要的服务器功能由 Django 通过服务器端模板提供 html，在与节点的 devServer 不同的端口上。

客户端无需热模块重新加载。在刷新页面之前，我可以继续使用陈旧的捆绑包。 这不是，也不可能是 SPA 或 Node 前端应用。

【问题讨论】：

运行或收听节目的 grep ℹ ｢wds｣：项目正在运行localhost:3000收听时间为 0.0.0.0:3000。 package.json 中用于运行开发服务器的脚本条目就是"scripts": "watch": "node server.js",。

所以，是的，Vue 不会在端口 8000 上找到任何有关节点的信息，即 Django 和 Django 未配置为将该请求重新路由到端口 3000 上的节点。我理解，但它也似乎没有这个请求成功并没有真正伤害任何东西。所以我宁愿完全关闭这些请求，也不愿将 Django 连接到 sockjs。

【参考方案1】：

（OP 的编辑：这个答案得到了赏金，因为它告诉我 Vue 在这里的相关性不如 Webpack 并且因为我对 Webpack 的相关配置选项的调查然后显示没有任何东西可以关闭这些请求。我现在得到的外卖是无法做到这一点 - 据我所知，如果 Django 在 :8000 提供服务，那么 Webpack HMR 隐含地希望能够在同一个主机：端口进行轮询，而无需重新选择-route 或将其关闭。因此，暂定的答案更像是 不，无法完成）。

由于您没有使用 Vue CLI，因此您需要一个 webpack.config.js，而不是 vue.config.js。假设您的 devServer 在 localhost:3000 上运行，（我不确定您的非标准设置）您可以在项目根目录的 webpack.config.js 中尝试此操作：

module.exports = 
  devServer: 
    host: 'localhost',
    port: 3000
  
;

如果这不起作用，我建议使用 Vue CLI 重新创建您的项目，并在 server 文件夹中为您的后端使用单独的 repo/package.json。

【讨论】：

Txs 为您提供帮助。那没什么区别。 devServer 在 localhost:3000 已经运行良好，并且捆绑包在实践中运行良好。我只希望浏览器停止在任何端口或服务器上发送 socketjs 请求。它不需要它们来操作，否则什么都行不通。

必须在其他地方进行，因为它为 socketjs 查找 8000。捆绑包通过django-webpack-loader 在 3000 处提供，这只是在 JS 脚本标签中。所以我不认为 Vue 真的知道节点的位置，它真的不必。所以我猜它假设它可以询问网站的整体地址，在 localhost:8000，即就它而言基本上是/。就是这样 - 使用 Vue-CLI 的纯 Vue + Node 配置仅对与 Django 的集成提供有限的指导。再次发送。

webpack.config.js 不是 Vue。据我了解，对 Sock 的请求是 Webpack 包试图将请求发送回devServer（顺便说一下，它是用于热模块重新加载）。 django-webpack-loader 可能会阐明为什么它会查看 8000。也许它必须在该加载器的选项中进行配置

但是，是的，省去很多麻烦：在 Vue CLI 中重新创建您的前端项目。创建一个服务器目录并在那里创建您的后端项目。很好很简单，两个 repos，两个 package.json，少了很多麻烦。您还将获得 Vue CLI + 社区解决方案的好处

我在想发生的事情是所有 devServer 配置内容只影响 server 方面。 IE。 Node在哪里服务它的包。那无疑是 3000 端口。但它不会影响 client 代码期望在哪里找到 sockjs，它被 假定 与 / 在同一个 localhost/port 上在端口 8000 上。因此，在任何非 Node 应用程序中，这绝对是 Django 前端，客户端代码不会使用 devServer 的端口。也许这是一个不同的设置？不知道，但是这个 sockjs 是一个非常小的问题，我明确表示不能/不想使用完整的 Vue 前端。

【参考方案2】：

添加到已接受的答案：使用错误端口对http://localhost:8000/sockjs-node/info?t=123 的其他请求可能是由webpack 插件 引起的。就我而言，罪魁祸首是 ReactRefreshWebpackPlugin。解决方案是告诉插件 webpack 开发服务器在哪个端口上：

// …in webpack.config.js…

plugins: [
  isDevelopment && new ReactRefreshWebpackPlugin(
    overlay: 
      sockPort: 3000, // <-- Tell plugin which port WDS is running at
    ,
  ),
].filter(Boolean),

devServer: 
  hot: true,
  port: 3000, // I used port 3000 here because of the setup in OP's question

文档：https://github.com/pmmmwh/react-refresh-webpack-plugin