開發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檔案就可以了，如下所示。

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);
        }
    }
}