I have the following NGINX config

events {}

http {
  access_log       /dev/stdout;
  error_log        /dev/stderr;

  resolver 1.1.1.1 1.0.0.1 valid=5s ipv6=off; # CloudFlare DNS resolver

  upstream myupstream {
    server       xyz.appspot.com:443;
  }

  server {
    server_name            www. mywebsite.com;
    listen                 80;

    set $myupstream "xyz.appspot.com:443";

    location ^~ /mypath/ {
      proxy_pass       https://myupstream/theirpath/;  # <-------- Case A - proxy_pass via UPSTREAM
      proxy_pass       https://$myupstream/theirpath/; # <-------- Case B - proxy_pass via VARIABLE
      proxy_set_header Host "$myupstream";
    }
  }
}

# TEST_URL:                http://www.mywebsite.com/mypath/framework.js
# DESTINATION_URL:         https://xyz.appspot.com:443/theirpath/framework.js

The problem occurs in the proxy_pass lines

When I use Case A ✅ ...

... proxy_pass via UPSTREAM... the TEST_URL returns correct header Content-Type: application/javascript as expected

When I use Case B ❌ ...

... proxy_pass via VARIABLE... the TEST_URL returns incorrect header Content-Type: text/html.

This results in faulty rendering by the browser.

How can I ensure "Case B" returns correctly like "Case A" does?

I ensured that the DESTINATION_URL is correctly returning Content-Type: application/javascript every time.