Base solution for your next web application
Open Closed

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

User avatar
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.

Go to accepted answer
11 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

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

  • User Avatar
    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.

  • User Avatar
    0
    ryancyq created
    Support Team

    can you share the CORS settings of your application?

  • User Avatar
    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"
  • User Avatar
    0
    ismcagdas created
    Support Team

    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)

  • User Avatar
    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.
  • User Avatar
    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();
                });
  • User Avatar
    0
    maliming created
    Support Team

    Are you sure your application environment is Staging?

  • User Avatar
    0
    abrewer created

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

  • User Avatar
    0
    ismcagdas created
    Support Team

    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.

  • User Avatar
    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.

Assignee
No one
Labels
Non yet