Hello Developers, I need some advice on the below.
We have an OnPrem setup and I'm developing a PWA application that works ok, however when there is a pre flight Authentication with Azure active directory , the prefilight requests are not passing though the access control check due to CORS policy. and because of this the PWA server worker js file isnt loading up and results in request failed with an error message popping up on the app and it also doesnt execute any of the server actions / aggreiates that to pull the data to the screen.
we also tried to add this policy in the IIS level.. but that did not solve this error.
at this point Im stuck and wondering where we have to apply this policy. Should it be on the app proxy level in azure ? if yes where should i look into? I also tried to look up some documentation that said adding crossorigin to the manifest link as below should solve the problem <link rel="manifest" href="moduleservices/pwa/manifest " crossorigin="use-credentials"/>
Ref linkhttps://github.com/ionic-team/stencil/issues/1802
because when we do an edge:inspect we are able to see the manifest file loaded as shown below
<link rel="manifest" href="moduleservices/pwa/manifest"></link>however, i tried to add it using the the Extensibility Configuration.
{ "PWAManifest" :{ "crossorigin":"use-credentials" }}
however, that didnt have effect on the link because I think it would add contents to the manifest file itself if I am not mistaken. anyone can assist me on this topic ?
It sounds like you are running into a common issue with CORS (Cross-Origin Resource Sharing) when making preflight requests during authentication with Azure Active Directory.
To address this issue, you will need to configure your server to allow CORS requests. Adding the crossorigin="use-credentials" attribute to the manifest link in your PWA is a step in the right direction, but it may not be sufficient on its own.
Here are some steps you can take to troubleshoot and fix the issue:
1-Check the response headers: When a preflight request is made, the server should respond with the appropriate CORS headers. Check the response headers to see if the server is sending the necessary headers. The headers you need to set include Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers. You can use a tool like Fiddler or Chrome Developer Tools to inspect the network traffic and see the response headers.
2-Enable CORS on the server: Depending on your server setup, you may need to enable CORS explicitly. This typically involves setting the appropriate headers in the server response. If you are using IIS, you can add the necessary headers to the web.config file. Here is an example of how to enable CORS in IIS:
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" /> <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" /> </customHeaders> </httpProtocol> </system.webServer>
3- Check the Azure AD settings: Make sure that your Azure AD settings are configured correctly. You may need to add your PWA domain to the list of allowed origins in Azure AD.
4-Use a reverse proxy: You can also consider using a reverse proxy like Azure Application Gateway to handle CORS requests. This can be a more scalable and secure solution.
Once you have made the necessary changes, try testing your PWA again and see if the issue is resolved.