The cross domain approach to the Vue development environment is handled using Nginx

1. The demand

The local test domain name is the same as the online domain name for proper Cookie delivery and SSO testing.

Note: since the relevant Cookie is added to the level 4 domain after the login of SSO, the local test domain name and the online interface domain name need to be the same.

2. Plan

Configure the Host file to point the online domain name to Localhost:

127.0.0.1 product.xxx.xxx.com

Configure Nginx for corresponding forwarding:

server {
  listen    80;
  listen    [::]:80;
  server_name ${product.xxx.xxx.com};

  location /api {
    proxy_pass https://${ip.ip.ip.ip};
    proxy_set_header Host $host;
  }

  location / {
    proxy_pass http://localhost:8080;
    proxy_set_header Host $host;
  }  
}

Configure vue.config.js to avoid errors reported by Invalid Host header:

{
  devServer: {
    disableHostCheck: true
  }
}