Dev environment should support web proxies

[robertpatrick]

Setup

• Rancher version: 2.6.x (head of master branch)
• Browser type & version: Chrome (latest)

Detailed Description

We are trying to work on this project to add extension points that we need and hope to contribute back. Our yarn dev environment is working against a Rancher server in a managed Kubernetes service in the cloud. To reach the server from our corporate network, we have to go through a web proxy server. We tried modifying nuxt.config.js to add an agent created from the http-proxy-agent and pass it down to the @nuxtjs/proxy options (using the agent property). Unfortunately, this resulted in an unexpected error when trying to access https://localhost:8005:

...
Find All: [management] management.cattle.io.setting                   13:54:10
node:_http_outgoing:576
    throw new ERR_HTTP_HEADERS_SENT('set');
    ^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:371:5)
    at ClientRequest.setHeader (node:_http_outgoing:576:11)
    at ProxyServer.onProxyReq (/Users/rpatrick/Projects/verrazzano-dashboard/nuxt.config.js:432:14)
    at ProxyServer.emit (/Users/rpatrick/Projects/verrazzano-dashboard/node_modules/http-proxy/node_modules/eventemitter3/index.js:184:35)
    at ClientRequest.<anonymous> (/Users/rpatrick/Projects/verrazzano-dashboard/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:133:16)
    at ClientRequest.emit (node:events:402:35)
    at ClientRequest.emit (node:domain:475:12)
    at tickOnSocket (node:_http_client:757:7)
    at onSocketNT (node:_http_client:817:5)
    at processTicksAndRejections (node:internal/process/task_queues:84:21) {
  code: 'ERR_HTTP_HEADERS_SENT'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Context

We are unable to run in development mode against a remote cluster in the cloud due to our corporate network requirments to use a web proxy server.

We want to add extension points to the dashboard to add custom workload types with custom pages. We believe that this exercise will help the community by driving discussion around new extension points that would allow us and others to enhance the dashboard without the need to fork the project.

[richard-cox]

For anyone that takes a look at this https://mitmproxy.org/ might be able to help (with it's proxy details supplied to nuxt).

@robertpatrick RE extension points for custom workload types and pages, we're in the process of implementing the concept of plugins. These will add additional features from code that lives outside of the dashboard repo. Whilst we don't explicitly plan on supporting custom workloads/resource types i don't think it would take too much plumbing on the custom feature side to wire in (from my understanding it would just be the routing). I think that's worth of a separate issue though, can you create one?

[robertpatrick]

@richard-cox Sure, I can create a new enhancement request.

I was able to get past the headers error and render the login page by changing https://github.com/rancher/dashboard/blob/master/nuxt.config.js#L401 to

  if (proxyReq._currentRequest && !proxyReq._currentRequest._headerSent) {

Unfortunately, when I try to log in, I get a CORS error in the DevTools Console. Haven't figured out why yet...

Access to XMLHttpRequest at 'https://rancher.default.129.153.65.30.nip.io/v3-public/localProviders/local?action=login' from origin 'https://localhost:8005' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

rancher.default.129.153.65.30.nip.io/v3-public/localProviders/local?action=login:1          Failed to load resource: net::ERR_FAILED```