Question 72650 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Azure giving error with long URL with Token – Reactjs

I have hosted a front end app using React and React Router Dom to Azure.

I have a reset password link with token as below

https://abc.azurewebsites.net/reset/CfDJ8AkOTLe70aJDl6Jq93G40f4OoMX35xv1bg73%2fU9WyIDfJae9LcF8iFFF6oiO7atp8l9O%2fr1lBq%2bMPZd2aPkELXWPB7YQ5lYoAkh3t2QdB5a%2fB%2bRvJordH34lEbPRBV%2by842E5z%2b1ZNSBstZljGOPZ6tOQNjLGH%2byAAUURGK2Z8rSFjQa22t0RXaVTzP59yCEagf42DGK9UM1PLqtSun655EVkoRH8Jg2LtgK2YZYv6zD

This work fine with localhost. However in Azure it gives this error

"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

I have already added the web.config that was suggested in few posts. It works for shorter URL but not sure how to make it work for bigger urls with tokens.

<?xml version="1.0"?>
<configuration>
  <system.web>
    <customErrors mode="Off"/>
    <httpRuntime maxQueryStringLength = "10000" />
  </system.web>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
    <security>
      <requestFiltering>
        <requestLimits maxQueryString="10000" />
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    SOLVED: Please use below. It seems this was a bug and they fixed it in 2019 github.com/Azure/azure-functions-host/pull/3916

    <security> <requestFiltering allowDoubleEscaping="true"> <requestLimits maxAllowedContentLength="104857600" maxUrl="8192" maxQueryString="2048"/> </requestFiltering> </security>


  2. 0

    The error message is due to the length of the URL with the token.

    Azure has a default limit of 2048 characters for URLs. You can increase the limit by adding the following configuration to your web.config file.

    <?xml version="1.0"?>
<configuration>
    <system.web>
        <customErrors mode="Off"/>
        <httpRuntime maxQueryStringLength = "32768" />
    </system.web>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
        <security>
            <requestFiltering>
                <requestLimits maxQueryString="32768" />
            </requestFiltering>
        </security>
    </system.webServer>
</configuration>

    As per the
    Azure Web App URL Length Limitations.
    The increase in the maximum length of the query string to 32768 characters.

    And you need to adjust the maxQueryStringLength value in the httpRuntime element to match the new limit you set in the requestLimits element.

    Approach 2

    const myToken = "long token"; 
const encoded_Token = encodeURIComponent(myToken); 
const reset_PasswordUrl = `https://somesample.com/reset-password/${encoded_Token}`;

    And it is a good practice to ensure that the URL is properly formatted and can be parsed correctly by the server.

    If the token is too long, it may exceed the maximum URL length allowed by Azure. In this case, you need to consider using a POST request instead of a GET request to pass the token.

    Alternatively, you can try shortening the token by using a tokenization service or by generating a shorter token.

    Another option is storing the token in a database and passing a unique identifier in the URL instead of the entire token.

    For further information refer to the SO link.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search