在我们开发开发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); } } }
以上就是在开发前后端项目中的一些调试测试细节地方，供参考。
专注于代码生成工具、.Net/.NetCore 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
转载请注明出处：撰写人：伍华聪 http://www.iqidi.com
