How to use Nginx to handle cross-domain Vue development environment

1. Demand

The local test domain name is the same as the online domain name to ensure correct cookie delivery and SSO testing.

Note: After SSO login, the relevant cookies are added to the fourth-level domain name, so the local test domain name and the online interface domain name must be the same.

2. Solution

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 Invalid Host header error:

{
  devServer: {
    disableHostCheck: true
  }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.