Axios löst domänenübergreifende Probleme in Vue und die Verwendung von Interceptoren

Im Folgenden werde ich einen Artikel darüber teilen, wie man domänenübergreifende Probleme löst und Interceptoren mit Axios in Vue verwendet. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

axios in vue unterstützt die Deklarationsmethode vue.use() nicht. Es gibt also zwei Möglichkeiten, dieses Problem zu lösen:

Die erste: Eingeführt in main.js Axios, und legen Sie es dann als Attribut in der Vue-Prototypkette fest, damit this.axios direkt in der Komponente

import axios from 'axios';
Vue.prototype.axios=axios;

Komponenten verwendet werden kann:

this.axios({
    url:"a.xxx",
    method:'post',
    data:{
      id:3,
      name:'jack'
    }
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
 }

Hier erforderlich Eins Zu beachten ist, dass es ungültig ist, die angeforderten Daten in Axios zu kopieren. Sie können Pfeilfunktionen verwenden, um dieses Problem zu lösen.

Das domänenübergreifende Problem des lokalen Proxys, wenn das Vue-CLI-Gerüst-Front-End die Back-End-Datenschnittstelle anpasst, greife ich beispielsweise auf die Schnittstelle auf localhost http://10.1.5.11:8080/xxx/ zu. Duty?time=2017-07- 07 14:57:22', es muss domänenübergreifend darauf zugegriffen werden. Bei direktem Zugriff wird XMLHTTPRequest nicht geladen. http://10.1.5.11:8080/xxx/duty?time= wird gemeldet 07.07.2017 14: 57:22'. Die Antwort auf die Preflight-Anfrage besteht die Zugriffskontrolle nicht.

Warum gibt es ein domänenübergreifendes Problem? Da es sich hierbei um eine nicht originale Kommunikation handelt, können Sie zu Google gehen, um mehr darüber zu erfahren. Hier müssen Sie nur index.js in der Konfiguration finden:

config/index .js

dev: {
  proxyTable: {
   '/api': {
    target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 
    changeOrigin: true,   //跨域
    pathRewrite: {
     '^/api': '/'     //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可
    }
   }

Das domänenübergreifende Problem ist erfolgreich, aber dieses domänenübergreifende Problem wird nur in der Entwicklungsumgebung (dev) gelöst, wenn es tatsächlich auf dem Server bereitgestellt wird Wenn der Server-Port beispielsweise 3001 ist, treten immer noch domänenübergreifende Probleme auf. Im ersten Schritt können wir testen Das Front-End in zwei Umgebungen: In config/dev.env.js und prod.env.js konfigurieren wir die angeforderte Adresse API_HOST in der Entwicklungsumgebung Die oben konfigurierte Proxy-Adress-API verwendet die normale Schnittstellenadresse in der Produktionsumgebung. Konfigurieren Sie sie daher in config/dev.env.js bzw. prod.env.js wie folgt. Nehmen Sie in beiden Dateien die folgenden Konfigurationen vor.

config/dev.env.js:

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://10.1.5.11:8080/"'
}

Natürlich, ob es ist Entwicklung oder Die Produktionsumgebung kann direkt http://10.1.5.11:8080// anfordern. Nach der Konfiguration ermittelt das Programm beim Testen automatisch, ob es sich bei der aktuellen Umgebung um eine Entwicklungs- oder Produktionsumgebung handelt, und stimmt dann automatisch mit API_HOST überein. Wir können in jeder Komponente die Adresse „process.env.API_HOST“ verwenden, z. B.:

instance.post(process.env.API_HOST+'user/login', this.form)

Und dann der zweite Schritt: Der Back-End-Server kann Cros domänenübergreifend konfigurieren, nämlich access-control-allow-origin: * bedeutet, dass jeder Zugriff erlaubt ist. Zusammenfassend lässt sich sagen: In einer Entwicklungsumgebung kann unser Front-End einen domänenübergreifenden Proxy konfigurieren. In einer echten Produktionsumgebung benötigen wir die Zusammenarbeit mit dem Back-End. Ein bestimmter Experte sagte: Diese Methode ist in IE9 und darunter nicht einfach zu verwenden. Wenn Kompatibilität erforderlich ist, besteht die beste Möglichkeit darin, einen Proxy zum Server-Port im Backend hinzuzufügen. Der Effekt ähnelt dem des Webpack-Proxys.

Axios sendet Probleme mit der Post-Anfrage

Beim Senden einer Post-Anfrage wird im Allgemeinen der Inhaltstyp festgelegt, der Typ des zu sendenden Inhalts, auf den sich application/json bezieht Senden eines JSON-Objekts, es muss jedoch im Voraus stringifiziert werden. application/xxxx-form bezieht sich auf das Senden? Im Format a=b&c=d können Sie es mit der qs-Methode formatieren. Nach der Installation von axios wird es nur noch in die Komponente importiert.

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}
const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

Einsatz von Abfangjägern

Wenn wir eine Adressseite besuchen, werden wir manchmal gebeten, uns erneut anzumelden, bevor wir erneut auf die Seite zugreifen Das heißt, die Identitätsauthentifizierung schlägt fehl, z. B. wenn das Token verloren geht oder das Token noch lokal existiert, aber abgelaufen ist. Daher kann das Problem nicht einfach durch die Beurteilung, ob ein lokaler Tokenwert vorhanden ist, gelöst werden. Zu diesem Zeitpunkt gibt der Server bei der Anforderung einen 401-Fehler zurück, der auf einen Autorisierungsfehler hinweist, dh es besteht kein Recht, auf die Seite zuzugreifen.

Wir können diese Situation filtern, bevor wir alle Anfragen senden und bevor wir die Serverantwortdaten manipulieren.

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
  config => {
    if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
      config.headers.Authorization = token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 这里写清除token的代码
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}  //登录成功后跳入浏览的当前页面
          })
      }
    }
    return Promise.reject(error.response.data) 
  });

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung des Mixins-Attributs von Vue

Instanz des Vue2.0-Simulationsankerpunkts

Vue verwendet Mixins, um komprimierten Bildcode zu implementieren

Das obige ist der detaillierte Inhalt vonAxios löst domänenübergreifende Probleme in Vue und die Verwendung von Interceptoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!