Bagaimana untuk mencapai domain silang antara ThinkPHP dan Vue

Dalam pembangunan web moden, pemisahan bahagian hadapan dan belakang ialah model pembangunan yang semakin biasa. Memandangkan bahagian hadapan menggunakan rangka kerja Vue dan bahagian belakang dibina menggunakan rangka kerja ThinkPHP, isu merentas domain tidak dapat dielakkan. Artikel ini akan memperkenalkan cara untuk mencapai domain silang antara ThinkPHP dan Vue.

1. Isu merentas domain dalam Vue

Vue ialah rangka kerja JavaScript moden untuk membina antara muka pengguna. Memandangkan Vue ialah aplikasi satu halaman, penyemak imbas hanya perlu merentas domain apabila mengambil data pada pelayan di mana komponen Vue berada. Apabila kami menghantar permintaan Ajax menggunakan Vue, penyemak imbas akan menyemak sama ada permintaan itu datang dari domain yang sama. Jika tidak, permintaan merentas domain dibuat.

2. Isu merentas domain dalam ThinkPHP

ThinkPHP ialah rangka kerja PHP sumber terbuka yang berkuasa yang digunakan secara meluas dalam pembangunan web. Dalam ThinkPHP, permintaan merentas domain adalah dilarang secara lalai. Jika anda ingin melaksanakan merentas domain dalam ThinkPHP, anda perlu melakukan beberapa konfigurasi.

3. Menyelesaikan masalah merentas domain

Dalam Vue, kami boleh menyelesaikan masalah merentas domain dengan menetapkan pengepala pustaka axios, seperti yang ditunjukkan di bawah:

import axios from 'axios'
axios.defaults.baseURL = 'http://example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

Dalam Dalam ThinkPHP, kita boleh menambah kod berikut dalam Pengawal:

header('Access-Control-Allow-Origin: * ');
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

Kod di atas akan menambah maklumat pengepala yang sepadan untuk membenarkan semua permintaan merentas domain.

Kami juga boleh mempunyai kawalan yang lebih terperinci, contohnya:

header('Access-Control-Allow-Origin: http://example.com');
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

Kod ini akan membenarkan permintaan merentas domain daripada http://example.com.

4. Proksi terbalik Nginx menyelesaikan masalah merentas domain

Jika anda perlu menggunakan Nginx sebagai proksi terbalik antara Vue dan ThinkPHP, anda boleh menggunakan fail konfigurasi berikut:

location / {
        proxy_pass http://backend/;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
    }

Konfigurasi di atas akan membolehkan Vue menghantar permintaan merentas domain. Antaranya, 'Access-Control-Allow-Origin' membenarkan permintaan daripada semua domain. Jika kami mahukan kawalan keselamatan selanjutnya, kami boleh mengubahnya untuk membenarkan permintaan daripada domain tertentu.

5. Ringkasan

Melalui analisis dan penyelesaian masalah merentas domain dalam Vue dan ThinkPHP, kita dapati bahawa masalah merentas domain bukanlah masalah yang tidak boleh diselesaikan. Semasa pembangunan, kami boleh menggunakan penyelesaian merentas domain biasa secara fleksibel dan kami juga boleh melaksanakan kawalan yang lebih terperinci mengikut keperluan sebenar. Jika anda menghadapi masalah merentas domain semasa pembangunan, anda mungkin ingin merujuk artikel ini, saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Bagaimana untuk mencapai domain silang antara ThinkPHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!