I've build a frontend with Angular x.x that picks up the routes of an existing ASP.NET Web API 1.x-Application.
There where some problems with the Authentication as well as the communication with the backend because of which I've implemented the following interceptor on the client side:
Angular-Interceptor for the Credentials:
@Injectable()
export class CredentialsInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
req = req.clone({
withCredentials: true
});
return next.handle(req);
}
}
To handle existing CORS-Conflicts I modified the Global.asax like this:
protected void Application_BeginRequest(object sender, EventArgs e)
{
string httpOrigin = HttpContext.Current.Request.Params["HTTP_ORIGIN"] ?? HttpContext.Current.Request.Params["ORIGIN"] ?? "*";
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", httpOrigin);
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, X-Token, withCredentials");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
{
HttpContext.Current.Response.StatusCode = 200;
var httpApplication = sender as HttpApplication;
httpApplication.CompleteRequest();
}
}
And the web.config like that:
<system.web>
<authentication mode="Windows" />
<authorization>
<allow verbs="OPTIONS" users="*"/>
<deny users="?"/>
</authorization>
</system.web>
<system.webServer>
<handlers>
<remove name="WebDAV" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
On my local machine the Backend was accessible at localhost:80
(with IIS Express) while I've hosted my Angular Application at 192.168.xxx.xx:80
over IIS 10.
In this environment everything worked perfectly fine and I had no problems whatsoever.
The Test-Environment is a Server with Windows Server 2008 R2 and IIS 7.5. For Deep-Link-Usage URL-Rewriter 2 is installed
After building the Backend and Frontend and the deploy to the mentioned environment the Application works as expected besides one big flaw.
The Backend-Address in IIS is *:80, *:8080 etc.
The Frontend-Address in IIS is Server-IP:80
While some routes work as expected some others that worked in the local-setup are producing the following CORS-Issue:
Access to XMLHttpRequest at *route* from origin *origin* 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 source.
So far I can't find any differences between the controllers which are working and those who do not.
Has anyone an idea what is going on here?
Such a minor thing with so much impact.
I forgot to add <remove name="OPTIONSVerbHandler" />
to the web.config
handlers.
Now everything works as expected! Hope it helps someone else.