Implementing Secure HTTPS Access to Local Services Without Importing Certificates

Background

Accessing local services via HTTPS to create a debugging environment consistent with the production environment for testing cookie cross-origin issues is a challenge. Most tutorials provided by search engines either require a local certificate process (which is complicated) or use non-secure HTTPS (which has a different cookie policy compared to secure HTTPS).

I have explored a method that allows secure HTTPS access to local services using a registered domain and acme.sh and local gateway .

Principle

• A legitimate certificate issued by a recognized authority is a prerequisite for secure HTTPS.
  • Is it possible to avoid needing a domain (by resolving the domain through the local host)? ❌ acme.sh requires a registered domain.
  • Is it possible to create a domain without a server? ✔ Traditional issuance of free certificates via acme.sh requires a server, but the DNS records method does not.
• DNS can resolve to a local IP. As long as the local gateway server provides a legitimate certificate issued by acme.sh during the TLS handshake, secure HTTPS access to local services can be achieved.

Pre-requisites

1. A purchased domain name.
2. Ability to customize DNS records, such as Cloudflare.
3. A local reverse proxy gateway program.

Brief Steps

I used Cloudflare and apisix as the gateway, but similar replacements can also be used. For specific operations, please refer to the respective documentation; here, only key steps are recorded.

1. Generate the domain certificate through CF DNS with acme.sh.
2. Configure the domain DNS to point to the local IP.
3. Add the generated certificate using the apisix admin API.
4. Configure apisix to route the domain to the local IP.

Considerations

If there is a proxy, you need to filter this domain, as it is a local IP.

If cross-origin issues persist, check:

1. Whether the frontend is using mock.js.

Application Adaptation

Development frameworks require configuration changes that differ from ordinary HTTP.

Vite Configuration for HMR vite.config.ts

server:{
    hmr:{ // If there is a layer of reverse proxy outside of vite, you need to manually specify the ws address, otherwise it will fail to connect and refresh indefinitely  
      protocol: 'ws',  
      host: 'localhost',  
      port: 5173,  
    }
}

If using apisix, you also need to enable WebSocket in apisix routes.

Koa.js Configuration to Allow Secure Cookies

pillarjs/cookies: Signed and unsigned cookies based on Keygrip (github.com)

app.proxy=true