使用Node（Webstorm /也许IntelliJ）提供更改localhost服务器文件

Question

我不确定我在这里失踪了什么，所以希望有人可以帮助我。我正在开展一个我们正在使用Node的项目，并且在运行/编辑配置中我已经完成以下任务：

Node interpreter:这是node.exe文件的路径 我从Subversion中检出了

Working directory:这就是＆＃34; app.js＆＃34;文件是，这是 从命令行键入节点app.js并启动服务器

的路径

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

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

我可以导航到localhost：3000 / myPage.html，我可以很好地到达页面 我将JSON文件添加到myPage.html所在硬盘上的相同目录中，我也可以localhost:3000/largeTestData.json导航到该目录。

所以服务器启动并运行并按原样提供文件。我的问题是，在我的Webstorm项目中，我想向该largeTestData文件发出一个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. 

所以我查看了网址，我看到了：

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指向在不同端口上运行的自己的内部Web服务器（例如63342）。 JavaScript安全性禁止从其他主机/端口Same-origin policy加载数据。

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

一般解决方案：

您必须确保HTML页面和JSON数据来自同一主机+端口，或者您可以环绕（a）设置服务器端标头（＆＃39; Access-Control-Allow-Origin：*＆ ＃39;）正如@lena建议的那样，或者（b）使用JSONP。下面你会发现一些使用nginx作为反向代理的想法，所以从浏览器的角度来看，所有请求都转到同一个主机+代理。这是一个非常常见的解决方案，但如上所述，还有其他选择。

原始解决方案：

请勿使用WebStorm打开浏览器。从http://localhost:3000/加载页面，并将REST资源的URL更改为$.get('/largeTestData.json')。您可以从IDE中得到一些安慰，但您可以立即看到您的程序正在运行。

舒适的解决方案：

正如@lena建议的那样，有一种方法可以将Express / node.js配置为WebStorm已知的服务器。我还没有尝试过，但我想你可以按下Run-button，也许WebStorm中的node.js插件可以智能地知道Express中的静态地图并知道如何映射HTML文件到web应用程序URL并使用node.js应用程序提供的URL在浏览器中打开页面。 （如果这真的很神奇，我会再次感到惊讶，但也许您可以手动配置从文件到URL的映射，我不知道。）

肮脏的解决方案

使用某些选项，您可以停用安全检查，至少在Google Chrome中是这样。然后，可以从HTML页面以外的其他端口加载JSON数据。我不建议使用这些选项（只是我的意见）。

其他提示

如果你做的不仅仅是使用node.js和一些UI乐趣而且你必须为你的应用程序服务＆＃34;生产就绪＆＃34;，那么看看nginx为你提供服务静态文件和反向代理node.js请求。即使是用于开发，我也使用此设置，它就像一个魅力。

当然，node.js / Express也可以提供静态文件，但是IMO在node.js（clustered）之前放置了类似nginx的东西，为生产网站带来了许多优势，例如：负载均衡，ssl-offloading，避免JSONP，在许多情况下性能，更容易的部署更新，可用性。

Answer 2

要使代码正常工作，只需将$ .get（）中的URL更改为完整URL（包括协议）：

var data = $.get('http://localhost:3000/phones.json');

Answer 3

在Webstorm 2016.3（可能更早）中，现在有另一种选择。在NodeJS运行的配置设置下，可以通过Webstorm＆＃34;浏览器/实时编辑＆＃34;手动设置要加载的页面和端口。设置。

请参阅下面的屏幕截图，了解可以更改的设置。