Comment gérer les requêtes inter-domaines dans les projets Vue

Comment gérer les requêtes inter-domaines dans le projet Vue nécessite des exemples de code spécifiques

Avec le développement rapide du développement front-end, les requêtes inter-domaines sont devenues un problème courant. En raison des restrictions de la même politique d'origine du navigateur, lorsque nous devons envoyer des requêtes à différents noms de domaine ou ports du projet Vue, nous rencontrerons des problèmes inter-domaines. Cet article expliquera comment gérer les requêtes inter-domaines dans le projet Vue et fournira des exemples de code spécifiques.

1. Configurez CORS (partage de ressources inter-domaines) sur le backend

Sur le serveur backend, nous pouvons autoriser les requêtes inter-domaines en définissant CORS. En prenant ici le framework Express de Node.js comme exemple, vous pouvez utiliser le middleware cors pour configurer CORS.

1. Tout d'abord, installez le middleware cors :

npm install cors --save

2. Introduisez cors dans le fichier d'entrée du serveur backend et définissez la configuration appropriée :

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

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

// 其他后端逻辑

Dans le code ci-dessus, origin précise autorisé accès L'adresse source est définie sur http://localhost:8080 Vous pouvez la modifier en fonction de la situation réelle. credentialsSpécifie s'il faut autoriser l'envoi de cookies, qui peuvent être définis en fonction des besoins du projet. 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

rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!