Open Closed

Chat feature is not working on Angular app deployed as a container in Azure #7212


0
abrewer created

Chat feature is not working on Angular app deployed as a container in Azure. The chat icon continues to spin and say "Chat is connecting..." but it never connects.


11 Answer(s)
  • 0
    maliming created

    Can you look at the log information in the browser console?

  • 0
    abrewer created

    yes. Here is the first error.

    Access to XMLHttpRequest at 'https://orcatms.azurewebsites.net//signalr/negotiate?enc_auth_token=wNYmO41%2F48SHNstaLVXxHCCre29BZQl1NhC6NM3R3rzpXtPQxVzH6jEzA%2FQhXFN5tu6Fk7pO53uppm1mVXMZgxbyRVz26dnepi%2FFyB6axBY%2B6gq1GL%2BuRQgoiFUCjRN2p8w6LevViwKlHyWZZJZO1DGVSjAi1m2U%2Bog9pkHw9%2FQR4Nl%2FDPnoP9JYDMpZ1zxx09u6s0GZ9%2FQ5Sjk%2BL0UfcSCbl38X8he5w9UIn%2FHvxh7ysM1CiPLsoOwtbiieSRVmrmt0JjnipAn4%2FK283F8GrGwzwgehWsqefmUnM0ckMwP9ZAdwQxWDhxv0IqNw4tDhwUYs%2F1SYdYozdNzgByhgNOBPzQDObNLlWc4vV5VMOiZU8IpUUl%2BKb9oTnGiJWiHwvPeJL5SC6S935vgJ2Hf61X7Z1oLneUqHPG290BBALgEOYRJACHefCD5qFMi%2BRo5ok2DuwagUBIUqNXljblCC39LjhD%2FXk3s8EymPmac0cjouYS09%2F6ElEyhMpQ5%2BKQl%2Fi1GsaJOEzPcd4yVAQ58gryXct4BfpW2xmU15HQm7t3u2e%2BSVRgvr7y6I3E0CVYaN%2BeEKrvJuAqDKNTm0GoajO4WlYqP6rcuuoCTxHHZnNY1V76bryWOALwlz8ZHDrI%2FurUQww9ZRKRhb6hO%2BP5MA9ZFWC1jSgJmlZKra7vahMZnuRZxZt4TS25pAjR8Uceg8tCyDpRKIVb1nE92hRwnsQ7P3vorfnaSvoBa9Gh8v3Y13NtICTqaCRw0%2B6mrqGK8j0CRZl1sbbCzbEGC3sKSmGcQbI%2Bx9V1MfQang5WlLO0m8cCP3CJqVA9l8tSK0AEcxjZYkYVBme4iCrSs3kXe6hKYlZ%2BVTIt%2BX2pSRQXaDqdWIKeZ015zXZhM2ao%2B7wpyknee6d6KzWzBkHlQHhwZak8cnxddvR0qKErOdcB6BUYVnYQylnX5C4h9AJHHI21gjG397X4WjlTCMteBp6RbAVkQrdlfk7fh81TEaN3g6%2B8I%3D' from origin 'https://orcaui.azurewebsites.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

  • 0
    ryancyq created

    can you share the CORS settings of your application?

  • 0
    abrewer created

    yes.

    Im running an azure app service with the CORS setting as follows.

    Azure App Service CORS Settings
    Allowed Origins
    https://orcaui.azurewebsites.net
    https://orcatms.azurewebsites.net
    

    Then my API backend project has the following settings

        "ServerRootAddress": "https://orcatms.azurewebsites.net",
        "ClientRootAddress": "https://orcaui.azurewebsites.net",
        "CorsOrigins": "https://orcaui.azurewebsites.net,https://orcatms.azurewebsites.net"
    
  • 0
    ismcagdas created

    Hi @abrewer

    What happens you you remove allowed origins from Azure portal and use only the Cors in appsettings.json for *.Host project ?

    It seems like having both can cause problems (see https://github.com/aspnet/SignalR/issues/2095)

  • 0
    abrewer created

    my ASPNETCORE_ENVIRONMENT is set to "Staging". So i have configured my API project's appsettings.Staging.json to the following.

        "ServerRootAddress": "https://orcatms.azurewebsites.net",
        "ClientRootAddress": "https://orcaui.azurewebsites.net",
        "CorsOrigins": "https://orcaui.azurewebsites.net"
    

    When i remove the CORS setting from azure, and have the above mentioned configuration i get the following error on my site.

        Access to XMLHttpRequest at 'https://orcatms.azurewebsites.net//AbpUserConfiguration/GetAll?d=1562107694929' from origin 'https://orcaui.azurewebsites.net' 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.
    
  • 0
    abrewer created

    I was finially able to get the chat feature to connect by modifiying CORS policy to include ".SetIsOriginAllowed((host)=> true)"

    I don't know if this policy make the site more vulnerable to cross scripting attacks though, I will need to research further.

                    options.AddPolicy(DefaultCorsPolicyName, builder =>
                    {
                        //App:CorsOrigins in appsettings.json can contain more than one address with splitted by comma.
                        builder
                            .WithOrigins(
                                // App:CorsOrigins in appsettings.json can contain more than one address separated by comma.
                                _appConfiguration["App:CorsOrigins"]
                                    .Split(",", StringSplitOptions.RemoveEmptyEntries)
                                    .Select(o => o.RemovePostFix("/"))
                                    .ToArray()
                            )
                            .SetIsOriginAllowedToAllowWildcardSubdomains()
                            .SetIsOriginAllowed((host)=> true)
                            .AllowAnyHeader()
                            .AllowAnyMethod()
                            .AllowCredentials();
                    });
    
  • 0
    maliming created

    Are you sure your application environment is Staging?

  • 0
    abrewer created

    yes, the logs for the running container have confirmed this.

  • 0
    ismcagdas created

    Hi @abrewer

    This (.SetIsOriginAllowed((host)=> true)) enables CORS for all origins, so it might be a vulnerablity problem. You can try to check the value of _appConfiguration["App:CorsOrigins"] to see if it matches the corret app url.

  • 1
    bluescopesteel created

    We have the same problem here. So I have applied the same solution. ie

    .SetIsOriginAllowed((host)=> true)

    For now.

    Seems to be no better solution described here.