开发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的配置项目中，找到对应项目的配置信息，如下所示。
<sitename="WebAPI"id="3"> <applicationpath="/"applicationPool="Clr4IntegratedAppPool"> <virtualDirectorypath="/"physicalPath="E:\个人应用程序\Web开发框架\Bootstrap开发框架\WebAPI" /> </application> <bindings> <bindingprotocol="http"bindingInformation="*:27206:localhost" /> </bindings> </site>
我们可以修改它，增加对应的局域网IP地址的配置信息，如下所示。
<sitename="WebAPI"id="3"> <applicationpath="/"applicationPool="Clr4IntegratedAppPool"> <virtualDirectorypath="/"physicalPath="G:\个人应用程序\Web开发框架\Bootstrap开发框架\WebAPI" /> </application> <bindings> <bindingprotocol="http"bindingInformation="*:27206:192.168.1.103" />
<bindingprotocol="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的工厂处理，设置相关的参数。
namespaceWebAPI
{public static classWebApiConfig
{public static voidRegister(HttpConfiguration config)
{//Web API 配置和服务//支持CORS//config.EnableCors(); config.SetCorsPolicyProviderFactory(newCorsPolicyFactory());
config.EnableCors();
完整的文件如下所示。
namespaceWebAPI
{/// <summary> ///JS跨域工厂类/// </summary> public classCorsPolicyFactory : ICorsPolicyProviderFactory
{
ICorsPolicyProvider _provider= newMyCorsPolicyAttribute();publicICorsPolicyProvider GetCorsPolicyProvider(HttpRequestMessage request)
{return_provider;
}
}
[AttributeUsage(AttributeTargets.Method| AttributeTargets.Class, AllowMultiple = false)]public classMyCorsPolicyAttribute : Attribute, ICorsPolicyProvider
{privateCorsPolicy _policy;publicMyCorsPolicyAttribute()
{
_policy= newCorsPolicy
{
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)
{returnTask.FromResult(_policy);
}public Task<CorsPolicy>GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)
{returnTask.FromResult(_policy);
}
}
}
以上就是在开发前后端项目中的一些调试测试细节地方，供参考。