Vue des solutions inter-domaines Axios aux problèmes

// axios 中的GET请求
axios.get('/user', {
    params: {
      ID: ‘001’
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// axios 中的POST请求
axios.post('/user', {
    firstName: '1',
    lastName: '2'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Scénario 1: Étant donné que l'utilisation de Axios l'accès interdomaines directe est impossible, il faut configurer l'agent. Raison de l'agent peut être résolu: parce que le client demande au serveur de données est la présence de problèmes inter-domaines, et entre le serveur et le serveur peut demander des données entre eux, il n'y a pas de concept inter-domaine (si le serveur n'est pas défini problème de permissions d'interdire inter-domaines), en d'autres termes, nous pouvons configurer un serveur proxy peut demander des données à partir d'un autre serveur, puis retourne les données demandées sur notre serveur proxy, serveur proxy renvoie ensuite les données à nos clients, afin que nous puissions atteindre l'accès aux données sur plusieurs domaines.

Préparation: Installer le middleware requis et des plug-ins, tels que Axios, middleware-http-proxy et ainsi de suite.

Cas particuliers: le cresson ici pour accéder au Top250, par exemple, un accès direct comme suit:

axios.get ( " http://api.douban.com/v2/movie/top250 ")
.Ensuite (res => {
console.log (res)
})
.catch (err => {
console.log (err)
})

Lors de l'exécution NPM dev, console étant donnée comme suit:

Les faits ont prouvé que interdomaine directe demande un problème se produit, les étapes suivantes pour résoudre le problème de la présentation spécifique inter-domaines:

Le cas des conditions mentionnées ci-dessus ont été installés complet, procédez comme suit pour résoudre le problème:

1. Configurer BaseUrl

Dans main.js, la configuration des données de préfixe de serveur (à savoir la partie fixe), suit en tant que:

// 项目入口，配置全局vue
import Vue from 'vue'
import VueRouter from './router/routes.js'
import Store from './store/index.js'

import './assets/less/index.less'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码
Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
    router:VueRouter,
    store:Store,
    template:'<App/>',
    components: {App}
}).$mount('#app')

// 默认进入商品模块
// VueRouter.push({ path: '/home' })

Code de la clé axios.defaults.baseURL = « / api », le rôle de chacun de nos demandes sont envoyées par un préfixe / APIs.

2. Configurer le proxy

Le fichier de configuration du champ proxyTable dans le dossier, le processus comme suit:

  dev: {
    env: require('./dev.env'),
    port: 8090,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://api.douban.com/v2', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

3. En particulier, lorsque l'utilisation Axios, des modifications à l'adresse suivante:

 axios.get("/movie/top250").then((res) => {
                  res = res.data
                  if (res.errno === ERR_OK) {
                     this.themeList=res.data;
                  }
                }).catch((error) => {
                  console.warn(error)
                })

4. Après le redémarrage du projet, question inter-domaines a été résolu, les résultats sont les suivants:
[Note]: Vous devez redémarrer le projet! !

principe:

Parce que nous avons ajouté un préfixe à l'URL / api, nous visitons / film / top250 quand visiter: localhost: 8080 / api / film / top250 (où localhost: 8080 est la valeur par défaut IP et le port).

Intercept / api dans index.js en proxyTable dans et mis / api a remplacé son contenu précédent est devenu la cible de, de sorte que la visite réelle URL est http://api.douban.com/v2/movie/top250 .

Jusqu'à présent, la configuration de proxy pure fin avant Axios résoudre résolu inter-domaines.

Selon le contenu de la section des commentaires, la distinction entre les environnements de production et de développement, collective configuré comme suit:

1. Créez un fichier de configuration api.config.js dans le dossier de configuration à l'intérieur

const ISPRO = Object.is (process.env.NODE_ENV, 'production')

console.log (ISPRO);

= {module.exports
baseUrl: ISPRO? HTTPS: //www.***/index.php/Official (adresse de ligne ) ': 'API /'
}
2. Les documents ci - dessus incorporé à l' intérieur du fichier main.js, donc peut être défini pour assurer que les allumettes préfixe dynamique des environnements de production et de développement, le code est le suivant:

import Vue de 'vue'
importation App de './app'
routeur importation de './router'
importation 'bootstrap / dist / js / bootstrap.min'
importation 'amorçage / dist / css / bootstrap.min.css'
Axios d'importation de «Axios
de apiConfig d'importation de « ../config/api.config »

. $ = Vue.prototype Axios Axios
Vue.config.productionTip = false;
axios.defaults.baseURL = apiConfig.baseUrl; // adresse d'une interface
axios.defaults.withCredentials = false; au-
dessus de deux étapes pour résoudre la vue interdomaine problèmes et peuvent être directement emballés pour construire en ligne, des questions, s'il vous plaît laisser une section commentaires de message, je l' espère pour votre aide.

20 pouces vers le haut