skip to Main Content

I have an api published in Azure App Service which uses some custom headers. When I deployed the app and trying to configure CORS, there is no option to set Allowed Headers. Also ,there doesn’t seems to mention in Microsoft Docs about this thing. Can anyone let me know if we can set Allowed Headers for Azure App Services?

  • Tried checking available options under App Service > Setting > API > CORS , App Service > Setting > Configurations
  • Tried to look for official documents from Microsoft for CORS with Allowed Headers for Azure App Service.

All trials ended with no luck.

2

Answers


  1. Azure App Service allows to configure CORS for web application, but it doesn’t provide a direct option to set Allowed Headers in the Azure Portal UI.

    To handle CORS in backend, we can set the allowed headers programmatically based on the framework.

    Below is the Example of Asp.net core, I set the Cors in Program.cs File.

    Program.cs:

    builder.Services.AddCors(options =>
    {
        options.AddPolicy("CustomCorsPolicy", policy =>
        {
            policy.WithOrigins("https://FrontendAppURL")
                  .AllowAnyMethod()                        
                  .AllowAnyHeader()                       
                  .WithHeaders("X-Custom-Header", "Content-Type");  
        });
    });
    
    app.UseCors("AllowCustomHeaders");
    

    For .Net Framework I used web.config file to set the Cors in Azure Web app service.

    I added the web.config file to the root directory of the Web Api.

    web.config:

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <httpProtocol>
          <customHeaders>
            <clear />
           <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, X-Custom-Header" />
            <add name="Cache-Control" value="public, max-age=3600" />
            <add name="X-Custom-Header" value="MyCustomHeaderValue" />
          </customHeaders>
        </httpProtocol>
        <rewrite>
          <rules>
            <rule name="Redirect to HTTPS" stopProcessing="true">
              <match url="(.*)" />
              <conditions>
                <add input="{HTTPS}" pattern="off" ignoreCase="true" />
              </conditions>
              <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
            </rule>
          </rules>
        </rewrite>
        <defaultDocument>
          <files>
            <clear />
            <add value="index.html" />
          </files>
        </defaultDocument>
      </system.webServer>
    </configuration>
    

    Output:

    enter image description here

    For More Details refer this Ms Doc.

    Login or Signup to reply.
  2. To set Allowed Headers for CORS in Azure App Services, you need to configure it within your application’s code, as the Azure Portal does not provide a direct option for this.
    For ASP.NET Core applications, you can set CORS policies in your Startup.cs or Program.cs file.
    Visit references provided:

    link
    link

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search