Bagaimana untuk menyelesaikan masalah silang domain nginx

Asingkan bahagian hadapan dan bahagian belakang, gunakan nginx untuk menyelesaikan masalah merentas domain

Halaman hadapan: vue.js+nodejs+webpack

Bandar belakang: springboot

Pelayan proksi terbalik: nginx

Idea: Bungkus kod bahagian hadapan, biarkan nginx menghala ke sumber statik dan nginx memajukan permintaan latar belakang.

1. Pakej kod bahagian hadapan:

npm run build

akan menjana folder dist. Mengandungi fail index.html dan folder statik Ambil laluan setempat saya sebagai contoh:

/users/xxx/ideaprojects/webtest/dist

2. Buka

nginx.conf dalam direktori /usr/local/etc/nginx, tambahkan yang berikut pada pelayan:

listen  80; #原为8080，避免冲突，更改为80

  server_name localhost;

 

  #charset koi8-r;

 

  #access_log logs/host.access.log main;

 

 

  location / {

   root /users/xxx/ideaprojects/webtest/dist;

   index index.html;

    

   # 此处用于处理 vue、angular、react 使用h5 的 history时 重写的问题

   if (!-e $request_filename) {

    rewrite ^(.*) /index.html last;

    break;

   }

  }

 

 

  # 代理服务端接口

  location /api/ {

   proxy_pass http://localhost:8080/;# 代理接口地址

  }

Ujian

Halaman hadapan menghantar permintaan : http://localhost/test, vue-router mengalihkannya ke http://localhost/api/demo/1, dan akses sebenar ialah http://localhost:8080/demo/1.

Hantar permintaan terus ke latar belakang: lawati http://localhost/api/demo/1, akses sebenar ialah: http://localhost:8080/demo/1

Berfikir tentang pengembangan kandungan:

1).
# Antara muka pelayan proksi

location /api/ {
proxy_pass http://localhost:8080/;# 代理接口地址
}

Alamat antara muka proksi hanya mencapai 8080, kemudian ia akan menambah nama secara automatik projek bahagian belakang? ? ? Sebagai contoh, antara muka ialah http://148.70.110.87:8080/nama projek/nama kaedah. . .

2).js diminta seperti ini nginx dikonfigurasikan mengikut anda di atas, tetapi ralat permintaan ialah http://148.70.110.87/api/index2 404 (tidak dijumpai)

axios.post('/api/index2')
.then( (response) =>{
console.log(response);
})
.catch( (error)=> {
console.log(error);
});

3). Langkah ketiga ialah menguji saya benar-benar tidak dapat memahaminya

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah silang domain nginx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!