Cara mengendalikan permintaan merentas domain dalam projek Vue

Cara mengendalikan permintaan merentas domain dalam projek Vue memerlukan contoh kod khusus

Dengan perkembangan pesat pembangunan bahagian hadapan, permintaan merentas domain telah menjadi masalah biasa. Disebabkan oleh sekatan dasar asal penyemak imbas yang sama, apabila kami perlu menghantar permintaan kepada nama domain atau port yang berbeza dalam projek Vue, kami akan menghadapi masalah merentas domain. Artikel ini akan memperkenalkan cara mengendalikan permintaan merentas domain dalam projek Vue dan memberikan contoh kod khusus.

1. Sediakan CORS (perkongsian sumber merentas domain) pada bahagian belakang

Pada pelayan bahagian belakang, kami boleh membenarkan permintaan merentas domain dengan menetapkan CORS. Mengambil rangka kerja Express Node.js sebagai contoh di sini, anda boleh menggunakan perisian tengah cors untuk menyediakan CORS.

1. Mula-mula, pasang perisian tengah kors:

npm install cors --save

2. Perkenalkan kor ke dalam fail kemasukan pelayan hujung belakang dan tetapkan konfigurasi yang berkaitan:

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

app.use(cors({
  origin: 'http://localhost:8080', // 允许访问的源地址
  credentials: true // 允许发送cookie
}));

// 其他后端逻辑

Dalam kod di atas, asal menyatakan yang dibenarkan akses Alamat sumber ditetapkan kepada http://localhost:8080 Anda boleh mengubah suainya mengikut situasi sebenar. kelayakanMenentukan sama ada untuk membenarkan kuki dihantar, yang boleh ditetapkan mengikut keperluan projek. origin指定了允许访问的源地址，这里设置为http://localhost:8080，你可以根据实际情况修改。credentials指定是否允许发送cookie，可以根据项目需要进行设置。

二、前端项目配置

在Vue项目中，可以通过配置proxyTable实现跨域请求。在config目录下的index.js文件中，可以找到如下代码：

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      // 代理示例
      '/api': {
        target: 'http://localhost:3000', // 接口的域名
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

以上代码中，我们通过proxyTable配置了一个代理，在访问/api开头的接口时，会代理到http:/localhost:3000。配置中的changeOrigin设置为true表示允许跨域。

三、在Vue组件中发送跨域请求

在Vue组件中，可以直接使用axios或者fetch等工具发送跨域请求。

1. 首先，安装axios：

npm install axios --save

2. 在需要发送跨域请求的Vue组件中引入axios：

import axios from 'axios';

// ...

export default {
  // ...
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
}

以上代码中，我们通过axios发送了一个GET请求到/api/data。在vue-cli生成的项目中，由于proxyTable的配置，实际请求会被代理到http://localhost:3000/data

2. Konfigurasi projek bahagian hadapan

Dalam projek Vue, anda boleh melaksanakan permintaan merentas domain dengan mengkonfigurasi Jadual proksi. Dalam fail index.js dalam direktori konfigurasi, anda boleh menemui kod berikut:

rrreee

Dalam kod di atas, kami mengkonfigurasi proksi melalui proxyTable Apabila mengakses antara muka bermula dengan /api, proksi akan menjadi http://localhost:3000. changeOrigin dalam konfigurasi ditetapkan kepada true untuk membenarkan merentas domain.

3. Hantar permintaan merentas domain dalam komponen Vue🎜🎜Dalam komponen Vue, anda boleh terus menggunakan alatan seperti axios atau fetch untuk menghantar permintaan merentas domain. 🎜🎜🎜Mula-mula, pasang axios: 🎜🎜rrreee🎜🎜Perkenalkan axios ke dalam komponen Vue yang perlu menghantar permintaan merentas domain: 🎜🎜rreee🎜Dalam kod di atas, kami menghantar permintaan GET ke /api/data melalui axios . Dalam projek yang dijana oleh vue-cli, disebabkan konfigurasi proxyTable, permintaan sebenar akan diproksikan ke http://localhost:3000/data. 🎜🎜Selain axios, anda juga boleh menggunakan alatan seperti fetch untuk menghantar permintaan merentas domain Penggunaan khusus adalah serupa. 🎜🎜Ringkasan🎜🎜Artikel ini memperkenalkan cara mengendalikan permintaan merentas domain dalam projek Vue dan menyediakan contoh kod khusus. Dengan menetapkan CORS pada bahagian belakang dan mengkonfigurasi projek bahagian hadapan, kami boleh menyelesaikan masalah permintaan merentas domain dengan mudah. Dalam proses pembangunan sebenar, kami perlu mengkonfigurasinya dengan sewajarnya mengikut syarat khusus projek untuk memastikan permintaan itu boleh menghantar dan menerima data secara normal. 🎜

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