Cara menggunakan Nginx untuk menangani isu merentas domain dalam persekitaran pembangunan Vue

1. Keperluan

Nama domain ujian tempatan adalah sama dengan nama domain dalam talian untuk menghantar kuki dan melakukan ujian sso dengan betul.

Nota: Memandangkan kuki yang berkaitan ditambahkan pada nama domain peringkat keempat selepas log masuk sso, nama domain ujian tempatan dan nama domain antara muka dalam talian perlu sama.

2. Penyelesaian

Konfigurasikan fail hos supaya nama domain dalam talian menghala ke localhost:

127.0.0.1 product.xxx.xxx.com

Konfigurasikan nginx untuk pemajuan yang sepadan:

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;
  }  
}

Konfigurasikan vue.config.js untuk mengelakkan ralat pengepala hos tidak sah:

{
  devserver: {
    disablehostcheck: true
  }
}

Atas ialah kandungan terperinci Cara menggunakan Nginx untuk menangani isu merentas domain dalam persekitaran pembangunan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!