How to use Nginx to handle Vue's development environment

1. Requirements

The local test domain name is the same as the online domain name in order to correctly deliver cookies and perform SSO testing.

Note: Since the relevant cookies are added to the fourth-level domain name after sso login, the local test domain name and the online interface domain name need to be the same.

2. Solution

Configure the host file so that the online domain name points 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 errors:

{
  devserver: {
    disablehostcheck: true
  }
}

The above is the detailed content of How to use Nginx to handle Vue's development environment. For more information, please follow other related articles on the PHP Chinese website!