How do I configure Yarp to allow querying string parameters in the request URL .Net Aspire?

Question

I have the following original request URL: http://localhost:5002/UploadedFiles/387324e2-e0b4-43e8-b53f-d48e70fb42f2.jpg

When using the NextJs Image component, it automatically adds the following query strings: &w=640&q=75

http://localhost:3000/_next/image?url=http%3A%2F%2Flocalhost%3A5002%2FUploadedFiles%2F387324e2-e0b4-43e8-b53f-d48e70fb42f2.jpg&w=640&q=75

I have configured the Yarp gateway in .Net Aspire 9.5 as follows:

var yarp = builder.AddYarp("gateway")
    .WithHostPort(5002)
    .WithConfiguration(yarpBuilder =>
    {
        yarpBuilder.AddRoute("/UploadedFiles/{**catch-all}", postService)
		.WithMatchRouteQueryParameter(new RouteQueryParameter
		{
			Name = "w",
			Values = new[] { "640" }
		}).WithMatchRouteQueryParameter(new RouteQueryParameter
		{
			Name = "q",
			Values = new[] { "75" }
		});
    });
```. But it doesn't work and I get the error: "url" parameter is not allowed in the browser.

I want to configure Yarp to allow querying parameters w=640&q=75. How do I configure Yarp to allow querying string parameters in the request URL?

Answer 1

To configure YARP (Yet Another Reverse Proxy) to allow querying string parameters in the request URL, you need to ensure that your route configuration correctly matches the query parameters you want to allow. Based on the provided configuration, it seems you're trying to match specific values for the query parameters w and q. However, if you want to allow any values for these parameters, you should modify your configuration accordingly.

Here’s how you can adjust your YARP configuration:

var yarp = builder.AddYarp("gateway")
    .WithHostPort(5002)
    .WithConfiguration(yarpBuilder =>
    {
        yarpBuilder.AddRoute("/UploadedFiles/{**catch-all}", postService)
            .WithMatchRouteQueryParameter(new RouteQueryParameter
            {
                Name = "w",
                // Allow any value for 'w'
                Mode = QueryParameterMatchMode.Exists
            })
            .WithMatchRouteQueryParameter(new RouteQueryParameter
            {
                Name = "q",
                // Allow any value for 'q'
                Mode = QueryParameterMatchMode.Exists
            });
    });

In this configuration:

• The Mode is set to Exists, which means that the route will match as long as the query parameters w and q are present in the request, regardless of their values.
• This should resolve the error regarding the "url" parameter not being allowed, as it will now accept any values for w and q.

Make sure to test this configuration to confirm that it works as expected with your Next.js application.

Answer 2

Thank you for reaching out.

The error url parameter not allowed in browser is not caused by YARP. YARP forwards query strings (like w and q) by default, so there’s no special configuration needed for that. The problem comes from Next.js Image Optimization security rules. Next.js blocks requests with a url parameter unless the image source is explicitly trusted. This is a security measure to prevent SSRF (Server-Side Request Forgery).

Next.js requires you to whitelist remote image sources in next.config.js. If your images are served from http://localhost:5002/UploadedFiles/... via YARP, Next.js will reject them unless you configure this.

Add your image origin to next.config.js under images.remotePatterns:      

"module.exports = {

  images: {

    remotePatterns: [

      {

        protocol: 'http',

        hostname: 'localhost',

        port: '5002',

        pathname: '/UploadedFiles/**',

      },

    ],

  },"

Then restart your Next.js app. After this, the <Image> component will work with query parameters like w=640&q=75 without errors.

Please let us know if you require any further assistance, we’re happy to help.

If you found this information useful, kindly mark this as "Accept Answer".