How to use Nginx to deal with the development environment of Vue

1. Demand

The local test domain name is the same as the online domain name, so that cookie can be passed correctly and sso tests can be conducted.

Note: Since the relevant cookie are added to the fourth-level domain name after sso login, it is necessary to ensure that the local test domain name is the same as the online interface domain name.

2. Program

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 error:

{ devserver: { disablehostcheck: true }}