Cara melaksanakan merentas domain dalam vue

Dengan pembangunan berterusan teknologi bahagian hadapan, jurutera bahagian hadapan selalunya perlu mendapatkan data melalui permintaan Ajax semasa membuat tapak web. Dalam proses ini, adalah mudah untuk menghadapi masalah merentas domain. Artikel ini akan memperkenalkan cara Vue.js melaksanakan permintaan merentas domain.

1. JSONP merentas domain

JSONP (JSON dengan Padding) ialah penyelesaian untuk interaksi data merentas domain. Ia dilaksanakan dengan menggunakan prinsip bahawa halaman boleh memuatkan skrip merentas tapak.

Untuk melaksanakan permintaan merentas domain JSONP dalam Vue.js, biasanya terdapat dua kaedah:

1) Buat teg skrip secara manual

Gunakan perpustakaan HTTP seperti axios atau Vue -resource , mulakan permintaan merentas domain dengan membuat teg skrip secara manual.

import jsonp from 'jsonp';

jsonp(url, null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

2) Gunakan jsonp pemalam Vue.js

Vue.js menyediakan pemalam yang dipanggil jsonp, yang boleh kami gunakan untuk melaksanakan permintaan merentas domain JSONP.

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

Vue.jsonp(url).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error.message);
});

2. CORS merentas domain

CORS (Cross-Origin Resource Sharing) ialah penyelesaian perkongsian sumber merentas domain yang membenarkan pelayan tapak web membenarkan sumber merentas asal berkongsi ke pelayar akses Domain, dengan itu mengelakkan beberapa isu keselamatan kaedah JSONP.

Permintaan merentas domain CORS digunakan dalam Vue.js dan tetapan yang berkaitan perlu dibuat pada bahagian pelayan. Kaedah pelaksanaan khusus adalah seperti berikut:

1) Tambahkan medan Access-Control-Allow-Origin dalam pengepala respons

Tambah medan Access-Control-Allow-Origin dalam pengepala respons dikembalikan oleh pelayan, Benarkan permintaan daripada nama domain tertentu untuk halaman hadapan.

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.json(data);
});

2) Hantar permintaan dalam Vue.js

Untuk menghantar permintaan merentas domain melalui pustaka Axios dalam Vue.js, tetapkan dengan Kredensial kepada benar.

axios.get('http://api.example.com/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error.message);
});

Ringkasan

Di atas ialah dua cara untuk melaksanakan permintaan merentas domain dalam Vue.js, JSONP dan CORS. Dalam pembangunan sebenar, kita boleh menggunakan kaedah yang berbeza mengikut keadaan tertentu. Jika ia sangat selamat dan tidak memerlukan konfigurasi pelayan tambahan, kami boleh menggunakan penyelesaian merentas domain JSONP jika keselamatan yang lebih tinggi dan fleksibiliti yang lebih tinggi diperlukan, kami boleh menggunakan penyelesaian merentas domain CORS.

Atas ialah kandungan terperinci Cara melaksanakan merentas domain dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!