开发H5程序或者小程序的时候，后端Web API项目在IISExpress调试中使用IP地址，便于开发调试

在我们开发开发H5程序或者小程序的时候，有时候需要基于内置浏览器或者微信开发者工具进行测试，这个时候可以采用默认的localhost进行访问后端接口，一般来说没什么问题，如果我们需要通过USB基座方式发布到手机进行App测试的时候，那就需要使用局域网的IP地址了，否则就无法访问后端的接口，本篇随笔总结在开发H5程序或者小程序的时候，后端Web API项目在IISExpress调试中使用IP地址和localhost地址并存，便于开发测试。

1、修改VS配置地址文件

默认我们IISExpress是采用localhost进行调试的，我们如果需要使用局域网地址如192.1068.1.*开始的IP端进行调试，那么就需要首先修改VS的配置信息，一般在项目的隐藏文件夹 .vs 中，找到对应项目的解决方案目录下的config目录，如我一个项目是：

 打开这个文件，可以看到很多配置信息，定位到binding的配置项目中，找到对应项目的配置信息，如下所示。

<site name="WebAPI" id="3">
    <application path="/" applicationPool="Clr4IntegratedAppPool">
        <virtualDirectory path="/" physicalPath="E:\个人应用程序\Web开发框架\Bootstrap开发框架\WebAPI" />
    </application>
    <bindings>
        <binding protocol="http" bindingInformation="*:27206:localhost" /> </bindings> </site>

我们可以修改它，增加对应的局域网IP地址的配置信息，如下所示。

<site name="WebAPI" id="3">
    <application path="/" applicationPool="Clr4IntegratedAppPool">
        <virtualDirectory path="/" physicalPath="G:\个人应用程序\Web开发框架\Bootstrap开发框架\WebAPI" />
    </application>
    <bindings>
        <binding protocol="http" bindingInformation="*:27206:192.168.1.103" />
        <binding protocol="http" bindingInformation="*:27306:localhost" />
    </bindings>
</site>

这里增加了一个局域网的IP配置项目，同时新建一个本地localhost的端口，因为我们希望保留两个不同的连接，如果只需保留局域网，那么移除其中一个localhost的配置即可。

保存文件就可以继续下一步了。

2、以管理员方式启动VS并进行查看

如果我们需要启动局域网IP的IISExpess端口，一定需要以管理员方式启动VS，否则IISExpess提示出错，无法绑定IP端口的。

然后在C#的Web API项目上，右键出现的菜单中，启动调试或者启动项目即可。

项目顺利启动后，就可以看到有两个不同的端口，一个是局域网IP的，一个是localhost的了。

 这样我们在前端项目上，就可以配置基础路径为局域网IP地址了。

   baseUrl: 'http://192.168.1.103:27206'

这样我们就可以在HBuilderX中进行扫码测试功能了，或者在微信开发者工具中也可以。

 如果通过USB基座发布到手机真机测试也可以正常访问局域网的后端接口数据了。

 

 运行程序可以获得APP的体验效果。 

3、后端Web API的CORS跨域处理。

有时候，我们需要在后端的Web API项目上设置CORS的跨域处理，以便于本地调试的访问处理。

如果是常规的Web API项目，我们设置其WebApiConfig文件就可以了，如下所示。

 增加CORS的工厂处理，设置相关的参数。

namespace WebAPI
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服务

            //支持CORS
            //config.EnableCors();

            config.SetCorsPolicyProviderFactory(new CorsPolicyFactory());
            config.EnableCors();

完整的文件如下所示。

namespace WebAPI
{
    /// <summary>
    /// JS跨域工厂类
    /// </summary>
    public class CorsPolicyFactory : ICorsPolicyProviderFactory
    {
        ICorsPolicyProvider _provider = new MyCorsPolicyAttribute();

        public ICorsPolicyProvider GetCorsPolicyProvider(HttpRequestMessage request)
        {
            return _provider;
        }
    }

    [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, AllowMultiple = false)]
    public class MyCorsPolicyAttribute : Attribute, ICorsPolicyProvider
    {
        private CorsPolicy _policy;

        public MyCorsPolicyAttribute()
        {
            _policy = new CorsPolicy
            {
                AllowAnyMethod = true,
                AllowAnyHeader = true,
                SupportsCredentials = true,
                AllowAnyOrigin = true,//设置所有的都可以
            };

            // Add allowed origins.
            _policy.Origins.Add("http://localhost:8080");
            _policy.Origins.Add("http://localhost:8081");
            _policy.Origins.Add("http://192.168.1.103:8080");
            _policy.Origins.Add("http://192.168.1.103:8081");
            //_policy.Origins.Add("http://localhost");
        }

        public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request)
        {
            return Task.FromResult(_policy);
        }

        public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)
        {
            return Task.FromResult(_policy);
        }
    }
}

以上就是在开发前后端项目中的一些调试测试细节地方，供参考。