ASP.NET WebApi + permit separation of the front and rear ends Vue enable cross-domain request

Preface:

　　During this time we took over a new demand before and after the end of an ASP.NET MVC project into separate projects. Front-end Vue, the back end is the use of ASP.NET WebApi. We found a widespread problem front and rear ends separated cross-domain (CORS) requests a problem after the completion of the front and rear end of the frame structures, the test interface. So there was this article on how to enable ASP.NET WebApi of CORS support.

First, solve Vue error: OPTIONS 405 Method Not Allowed questions:

Reproduce the error:

index.umd.min.js:1 OPTIONS http://localhost:1204/api/Login/ShopKeeperLogin 405 (Method Not Allowed)

Solution:

Add handling of OPTIONS method in Global.asax in the project:

        ///  <Summary> 
        /// cross-domain setting (pre-request response questions)
         ///  </ Summary> 
        protected  void the Application_BeginRequest () 
        { 
            // main function (pre-request, determines whether the request can be successfully) the OPTIONS request method:
             // used to check the performance of the server. Such as: AJAX preflight request when a cross-domain, needs to send a first HTTP OPTIONS request to request determination of whether the actual transmission resource to another security domain. 
            IF (Request.Headers.AllKeys.Contains ( " Origin " ) && Request.HttpMethod == " the OPTIONS " ) 
            { 
                // represents the content of the output buffers, when executed page.Response.Flush (), and all contents of the buffer will completed, the content is sent to the client.
                // This will not go wrong, resulting in stuck status page, allowing users unlimited wait 
                 Response.Flush ();
            } 
        }

Second, the solution ASP.NET WebApi cross-domain resource sharing -Cross Origin Resource Sharing (CORS) issues:

Reproduce the error:

　Access to XMLHttpRequest at 'http://localhost:1204/api/Login/ShopKeeperLogin' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Allow all sources, HTTP method, cross-domain request header:

System.webServer label found inside in Web.config add the following configuration:

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>

Designate corresponding source, HTTP request headers and cross-domain methods:

For more details, refer to the Microsoft official documentation: https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api#set-the-allowed- origins