net::ERR_CONNECTION_REFUSED 离子答案

【问题标题】：net::ERR_CONNECTION_REFUSED ionicnet::ERR_CONNECTION_REFUSED 离子
【发布时间】：2016-05-05 23:56:53
【问题描述】：

我正在使用 ionic 开发应用程序，我可以从我的 webApi 服务器检索数据并使用 ionic serve 在导航器上显示它们，但是当我尝试在模拟器上执行它时：ionic run android -l -c 我收到此错误：@ 987654325@

奇怪的是 $scope 包含所需的数据，我可以记录它们。

【问题讨论】：

你是否在你的 web api 上启用了 CORS？此外，模拟器中的 localhost 是模拟器机器，而不是您的 Web api 服务器。您需要在网络上公开您的 Web api 服务器。我在 Windows 10 上通过将 IIS 配置为将请求转发到 IIS express 的反向代理来做到这一点
谢谢，但我该怎么做呢？
做什么？启用 CORS？将您的 Web api 服务器暴露给您的网络？还是将 IIS 配置为反向代理？

标签： android cordova asp.net-web-api ionic-framework

【解决方案1】：

Android 设备/模拟器上的 localhost 很可能无法解析为您的开发机器/服务器的 IP。本地主机可能指向设备/模拟器本身。你能打你机器的实际IP地址吗？或者您可以将 Web 服务托管在云中的某个位置并尝试一下吗？

谢谢，丹

【讨论】：

非常感谢您节省了我的时间）

【解决方案2】：

在您的模拟器中（并且 Ionic 应用程序正在模拟器中运行），http://localhost 不再指代您的计算机，而是指模拟的设备。了解这一点，http://localhost:26309/api/User/getAll/ 不是您设计中的有效端点，因此请求失败。

要解决这个问题，您有两种选择：

第一个选项是在您的 Ionic 应用程序中创建一个简单的代理。编辑您的ionic.config.json 如下：

{
  "name": "appname",
  ...
  "proxies": [
    {
      "path": "/localhost",
      "proxyUrl": "http://localhost:26309"
    }
  ]
}

现在，当从您的 Ionic 应用发出请求时，只需写 /localhost/api/User/getAll/ 即可。

第二个选项是使用您计算机的私有 IP 作为端点域。因此，您可以使用http://192.168.X.Y:26309，而不是使用http://localhost:26309

【讨论】：

我的计算机的私有 IP 是要走的路。这是一个聪明的解决方案，谢谢！

【解决方案3】：

由于 cordova 应用程序是从设备文件系统加载的，因此它的来源与 Web api 不同。该应用程序尝试调用 web api，但 Same Origin Policy 禁止这样做。要克服这个问题，您需要在您的 web api 上 enable CORS。

要启用 CORS，您需要安装 Microsoft.AspNet.WebApi.Cors NuGet 包并使用 EnableCors 属性。例如：

using System.Collections.Generic;
using System.Web.Http;
using System.Web.Http.Cors;
using WebApiServer.Models;

namespace WebApiServer.Controllers
{
    [RoutePrefix("databases")]
    [EnableCors("*", "*", "*")]
    public class DatabasesController : ApiController
    {
        [Route("")]
        [HttpGet]
        public IHttpActionResult Get()
        {
            var databases = new List<DatabaseCategory>()
            {
                new DatabaseCategory
                {
                    CategoryName = "Bases de datos relacionales",
                    Databases = new List<Database>()
                    {
                        new Database() { DatabaseName = "SQL Server" },
                        new Database() { DatabaseName = "Oracle" },
                        new Database { DatabaseName = "PostgreSQL" }
                    }
                },
                new DatabaseCategory
                {
                    CategoryName = "Bases de datos NoSQL",
                    Databases = new List<Database>()
                    {
                        new Database() { DatabaseName = "RavenDB" },
                        new Database { DatabaseName = "CouchBase" },
                        new Database { DatabaseName = "MongoDB" }
                    }
                }
            };
            return Ok(databases);
        }
    }
}

如果在设备（模拟或物理）上运行的应用调用http://localhost:26309/databases，它会尝试连接到设备自身的端口 26309，而不是连接到运行 Web api 的开发人员机器。所以你会收到ERR_CONNECTION_REFUSED，因为设备上没有人在监听那个端口。

因此，不要使用http://localhost:26309，您应该使用您的开发人员机器 IP 地址或解析到它的 DNS 名称。例如http://192.168.8.162:26309 或http://yourMachine.yourDomain.com:26309。但是你会遇到另一个问题，你的 web api 运行在不允许远程连接的开发 web 服务器 IIS Express 上。它可以配置为允许远程连接，但是您必须以管理员身份执行 Visual Studio。更好的解决方案是安装 IIS 并将其配置为反向代理。这可以通过安装URL rewrite and ARR和configuring it在Windows 10 Pro中完成：

首先安装 IIS，进入控制面板，打开 Windows 功能或关闭，启用 Internet 信息服务。
从here 安装 URL Rewrite 2.0
从here 安装应用程序请求路由 3.0
打开 Internet 信息服务管理器
添加网站。设置站点名称和物理路径。在绑定部分，指定 26308 端口（我的个人约定：IIS Express 端口 - 1）。将主机名留空。
单击新创建的网站。在右侧窗格中打开“URL 重写”
在“操作”窗格中单击“添加规则”，选择“反向代理”
在“输入服务器名称或IP地址...”文本框写localhost:26309
点击确定
将 TCP 端口 26308 的例外规则添加到 Windows 防火墙。

现在您需要修改您的 cordova 应用程序以向 IIS 上新创建的网站发出请求。它需要向http://192.168.8.162:26308或http://yourMachine.yourDomain.com:26308提出请求

通过这种方式，您可以同时调试您的 cordova 应用程序和 web api 应用程序，我的意思是您可以为两者添加断点。它适用于模拟设备以及连接到 USB 的物理设备。您将需要一个可供您的开发机器和设备访问的适当 wifi。

【讨论】：

【解决方案4】：

2020 年更新。什么对我有用：

ionic cordova run android --no-native-run --livereload --external

也将此添加到config.xml

<platform name="android">
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
        </edit-config>
...
</platform>

【讨论】：

这对我很有帮助，谢谢！

【解决方案5】：

发生此错误的原因有多种。

确保您尝试访问的 URL 有效或无效。

然后确保您在后端应用程序中启用了 CORS。为此，请使用 Microsoft.AspNet.WebApi.Cors 或者如果您使用的是 OWIN，那么在 startup.cs 配置中，请使用 app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll) （来自 Microsoft.Owin.Cors）

完成此操作后，请转到您的 web.config 并输入以下内容：

<system.webServer>
 <httpProtocol>
      <customHeaders>
        <clear/>
        <add name="Access-Control-Allow-Credentials" value="true"/>
      </customHeaders>
    </httpProtocol>
</system.webServer>

这样就可以解决问题了。

【讨论】：