更改本地主机服务器文件是从使用节点（Webstorm /也许IntelliJ）

我不确定我在这里错过了什么，所以希望有人能帮助我。 我正在使用Node的项目，在运行/编辑configuration我下面是：

Node interpreter:这是从Subversion检出的node.exe文件的path

Working directory:这是“app.js”文件的位置，这是从命令行input节点app.js并启动服务器的path

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

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

我可以导航到本地主机：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. 

所以我看看url，我看到：

 http://localhost:63342/ 

很显然，Webstorm已经正确地启动了服务器，但是当我查看一个HTML文件时，它并没有使用这个服务器（这当然是我得到CORS错误的原因。

这里有一些基本的东西，我显然没有得到。 我需要我的IDE部署到它启动的Web服务器，但这不是这样做的。 请有人给我一个关于我在这里错过的所有技术的一次。

Answer 1

WebStrom没有启动你的node.js服务器，而是通过它自己的内部HTTP服务器来提供静态页面，这个服务器对node.js和Express没有任何了解。

主要问题：

当您启动node.js服务器时，它将在端口3000上提供JSON文件。如果您在WebStorm（您可以select浏览器）中打开一个带有小菜单的HTML页面，WebStorm将打开一个指向其自己的URL的浏览器内部networking服务器运行在不同的端口（例如63342）。 JavaScript安全性禁止从不同的主机/端口同源策略加载数据。

这不是WebStorm的错，你需要在生产中解决这个问题，否则你不能上线。

一般解决scheme

要么你必须确保HTML页面和JSON数据来自同一个主机+端口，或者你可以（a）设置服务器端的头文件（'Access-Control-Allow-Origin：*'）作为@lena的提示，或（b）使用JSONP 。 下面你会发现一些使用nginx作为反向代理的想法，所以从浏览器的angular度来看，所有的请求都转到同一个主机+代理上。 这是一个非常普遍的解决scheme，但如上所述，还有其他select。

原始解决scheme：

不要使用WebStorm打开浏览器。 从http://localhost:3000/加载页面，并将REST资源的URL改为$.get('/largeTestData.json') 。 你会错过你的IDE的一些舒适，但你可以立即看到你的程序正在工作。

舒适的解决scheme：

正如@lena所说，有一种方法可以将您的Express / node.jsconfiguration为WebStorm已知的服务器。 我还没有尝试过，但我想你可以按下运行button，也许WebStorm中的node.js插件是智能的，以了解Express中的静态映射，并知道如何将HTML文件映射到web应用程序URL，并使用由node.js应用程序提供的URL在浏览器中打开该页面。 （如果这个function真的起作用了，我会再一次感到惊讶，但是也许你可以手动configuration从文件到URL的映射，我不知道。）

脏解决scheme

有了一些选项，您可以禁用安全检查，至less在谷歌浏览器。 然后，可以从不同于HTML页面的端口加载JSON数据。 我不会推荐使用这些选项（只是我的意见）。

附加提示

如果你不仅仅是玩弄node.js和一些UI的乐趣，而且你必须为你的应用程序“生产就绪”服务，那么看看nginx来为你的静态文件和反向代理node.js请求。 我甚至使用这个设置进行开发，它的function就像一个魅力。

当然，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（也许更早）中，现在有另一种select。 在NodeJS运行的configuration设置下，可以通过Webstorm的“浏览器/实时编辑”设置手动设置要加载的页面和端口。

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