QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.64k stars 1.28k forks source link

[🐞] useLocation() always returns "http" protocol, even though it is on https #6382

Open jsaad-syncoms opened 3 months ago

jsaad-syncoms commented 3 months ago

Which component is affected?

Qwik City (routing)

Describe the bug

I have deployed my app to a live server, with https, and useLocation() always returns "http:" as protocol. This leads to the following error where I need to change URL parameteres for certain pages:

DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://[...myURL]' cannot be created in a document with origin 'https://[...myURL]' and URL 'https://[...myURL]'.

At the moment, it looks like I'm gonna just to have use the standard document.location.

Reproduction

https://stackblitz.com/edit/qwik-starter-ddc5id?file=src%2Froutes%2Findex.tsx

Steps to reproduce

Deply any code to a live server with https and console.log(location.url).

System Info

NAME="Rocky Linux"
VERSION="9.3 (Blue Onyx)"
ID="rocky"
ID_LIKE="rhel centos fedora"
VERSION_ID="9.3"
PLATFORM_ID="platform:el9"
PRETTY_NAME="Rocky Linux 9.3 (Blue Onyx)"
ANSI_COLOR="0;32"
LOGO="fedora-logo-icon"
CPE_NAME="cpe:/o:rocky:rocky:9::baseos"
HOME_URL="https://rockylinux.org/"
BUG_REPORT_URL="https://bugs.rockylinux.org/"
SUPPORT_END="2032-05-31"
ROCKY_SUPPORT_PRODUCT="Rocky-Linux-9"
ROCKY_SUPPORT_PRODUCT_VERSION="9.3"
REDHAT_SUPPORT_PRODUCT="Rocky Linux"
REDHAT_SUPPORT_PRODUCT_VERSION="9.3"

Additional Information

No response

PatrickJS commented 3 months ago

this is technically working as expected since useTask is running on the server and we pass the url from the server environment you're on. so in your adapter for your platform you can update the url to the correct url you want or it depends on which adapter you're deploying with

image

image

the fix would be to make sure your platform

PatrickJS commented 3 months ago

ok I see what you're saying it's not really clear and only works correctly in certain adapters

jsaad-syncoms commented 3 months ago

Hi @PatrickJS - thanks for your reply. So this is the adapter config being used in the project:

export default extendConfig(baseConfig, () => {
  return {
    build: {
      ssr: true,
      rollupOptions: {
        input: ["src/entry.express.tsx","@qwik-city-plan"],
      },
    },
    plugins: [
      nodeServerAdapter({ name: 'express'})
    ],
  };
});

Is there anything I can do in this config to remedy the situation?

wakonp commented 1 month ago

Hi, I can relate to that problem. In my setup, the qwik application is running within a cluster, and there are multiple proxies in front of it. It is necessary to always include the X-Forwarded-Proto Header within your proxy settings. Qwik uses the header to change the protocol of the origin.

It was confusing because I always set the ORIGIN env variable, and requests sent directly to qwik (without going through the proxies) always returned the correct URL.

I hope this is helpful.