node.js - 更改本地主机服务器文件是通过使用 Node(Webstorm/也许是 IntelliJ)来提供的

Question

我不确定我在这里缺少什么，所以希望有人可以帮助我。我正在开发一个使用 Node 的项目，并且在运行/编辑配置中我设置了以下内容:

Node 解释器:这是node.exe文件的路径 我从 Subversion 中查看了

工作目录:这是“app.js”文件所在的位置，这是 从命令行输入 Node app.js 并启动服务器的路径

JavaScript 文件: app.js 这是实际创建服务器的文件的名称

现在，当我运行/运行我的服务器时，从主导航栏会弹出底部的框，告诉我 Express 服务器正在监听端口 3000。太酷了。

我可以导航到 localhost:3000/myPage.html 并且可以正常访问该页面。
我将 JSON 文件添加到 myPage.html 所在硬盘上的相同目录中，我也可以通过 localhost:3000/largeTestData.json 导航到该目录.

因此，服务器已启动并正在运行，并按其应有的方式提供文件。我的问题是，在我的 Webstorm 项目中，我想向该大型TestData 文件发出 AJAX 请求。我使用 jQuery 来实现这一点，例如:

 var data = $.get('localhost:3000/largeTestData.json');
    data.done(function(data){
        console.log('here is your data');
        cnosole.log(data);
    })

当我这样做时，我收到错误(在 Chrome 中)

XMLHttpRequest cannot load localhost:3000/largeTestData.json. Cross origin requests are only supported for HTTP. 

所以我查看了 URL，我看到:

http://localhost:63342/

显然 Webstorm 已正确启动服务器，但当我查看 HTML 文件时，它没有使用该服务器(这当然就是我收到 CORS 错误的原因。

这里有一些我显然不明白的基本内容。我需要将 IDE 部署到它启动的 Web 服务器，但它没有这样做。请有人让我重温一下我在这里错过的所有技术。

Answer 1

WebStrom 没有启动您的 Node.js 服务器，而是通过其自己的内部 HTTP 服务器提供静态页面，该服务器不了解 Node.js 和 Express 的任何信息。

主要问题:

当您启动 Node.js 服务器时，它会在端口 3000 上提供 JSON 文件。如果您在 WebStorm 中打开带有小菜单的 HTML 页面(您可以在其中选择浏览器)，WebStorm 会打开带有指向 URL 的浏览器到在不同端口上运行的其自己的内部网络服务器(例如 63342)。 JavaScript 安全性禁止从不同的主机/端口加载数据 Same-origin policy .

这不是 WebStorm 的错，您需要在生产中解决此问题，否则无法上线。

一般解决方案:

要么必须确保 HTML 页面和 JSON 数据来自同一主机 + 端口，要么可以通过 (a) 将服务器端 header ('Access-Control-Allow-Origin: *') 设置为 @ 来绕行lena 建议，或 (b) 使用 JSONP 。下面您会发现一些使用 nginx 作为反向代理的想法，因此从浏览器的角度来看，所有请求都会发送到同一主机+代理。这是一个非常常见的解决方案，但如上所述，还有其他选择。

原始解决方案:

不要使用 WebStorm 打开浏览器。从 http://localhost:3000/ 加载页面，并将 REST 资源的 URL 更改为 $.get('/largeTestData.json')。您可能会怀念 IDE 带来的一些舒适感，但您可以立即看到您的程序正在运行。

舒适的解决方案:

正如 @lena 所建议的，有一种方法可以将 Express/node.js 配置为 WebStorm 已知的服务器。我还没有尝试过，但我想您只需按“运行”按钮即可，也许 WebStorm 中的 node.js 插件同样智能，可以了解 Express 中的静态映射并知道如何将 HTML 文件映射到Web 应用程序 URL，并使用 Node.js 应用程序提供的 URL 在浏览器中打开页面。 (如果这真的神奇地起作用，我会再次感到惊讶，但也许你可以手动配置从文件到 URL 的映射，我不知道。)

脏溶液

通过某些选项，您可以禁用安全检查，至少在 Google Chrome 中是这样。然后就可以从 HTML 页面之外的不同端口加载 JSON 数据。我不建议使用这些选项(只是我的意见)。

其他提示

如果您所做的不仅仅是玩弄 Node.js 和一些 UI 乐趣，并且您必须为您的应用程序提供“生产就绪”服务，那么请查看 nginx为您的静态文件和反向代理 node.js 请求提供服务。我什至在开发中也使用此设置，它的效果非常好。

当然，node.js/Express 也能够提供静态文件，但在我看来，将 nginx 之类的东西放在 node.js(集群)前面会给生产站点带来很多优势，例如负载平衡、ssl 卸载、避免 JSONP、在许多情况下性能、更轻松的部署更新、可用性。