Detaillierte Erläuterung der vue-cli+axios-Anfrage und der domänenübergreifenden Implementierungsschritte

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der Schritte für die Vue-Cli+Axios-Anfrage und die domänenübergreifende Implementierung geben. Was sind die Vorsichtsmaßnahmen für die Vue-Cli+Axios-Anfrage und die domänenübergreifende Implementierung? . Das Folgende ist ein praktischer Fall.

• Axios installieren

cnpm install axios --save

• Fügen Sie Axios in der Datei ein, in der Sie Axios verwenden möchten

main.js文件 :import axios from 'axois'
要发送请求的文件:import axios from 'axois'

• Stellen Sie den Proxy in der Datei config/index.js ein

 dev: {   
  proxyTable: {// 输入/api 让其去访问http://localhost:3000/api
   '/api':{  
     target:'http://localhost:3000'//设置调用的接口域名和端口号 ( 设置代理目标)
   },
   '/api/*':{
    target:'http://localhost:3000'
   }，
  changeOrigin: true,
   pathRewrite: { //路径重写 
      '^/api': '/' //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:3002/user/add'，直接写‘/api/goods/add'即可
    } 
  }

Probieren Sie es aus, die domänenübergreifende Arbeit ist erfolgreich, aber dieses Wissen kann in der Entwicklungsumgebung (dev) gelöst werden. Domänenübergreifende Probleme wurden gelöst. Bei der Bereitstellung auf dem Server in einer Produktionsumgebung treten weiterhin domänenübergreifende Probleme auf, wenn die Bereitstellung von einer nicht ursprünglichen Quelle erfolgt.

Axios-Anfragemethode

Anfrage abrufen

 // 向具有指定id的用户发出请求
  axios.get('/user?id=1001')
   .then(function (response) {
    console.log(response.data);
   }).catch(function (error) {
    console.log(error);
   });
  // 也可以通过 params 对象传递参数
  axios.get('/user', {
    params: {
     id: 1001
    }
   }).then(function (response) {//请求成功回调函数
    console.log(response);
   }).catch(function (error) {//请求失败时的回调函数
    console.log(error);
   });

Anfrage posten

  axios.post('/user', {
    userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的
   }).then(function (response) {
    console.log(response);
   }).catch(function (error) {
    console.log(error);
   });

Ergänzung:

Axios löst domänenübergreifende Probleme und Interceptor-Nutzung in Vue

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

Die erste: Führen Sie Axios in main.js ein und legen Sie es dann als Eigenschaft in der Vue-Prototypkette fest, sodass auf this.axios direkt im zugegriffen werden kann Bei der Verwendung von

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

ist zu beachten, dass die Verwendung dieser Komponente zum Kopieren der angeforderten Daten in Daten in Axios ungültig ist. Dies kann durch die Verwendung von Pfeilfunktionen gelöst werden.

1. Das domänenübergreifende Problem des lokalen Proxys, wenn das Vue-CLI-Gerüst-Frontend die Back-End-Datenschnittstelle anpasst, greife ich beispielsweise auf die Schnittstelle auf localhost http://10.1.5.11:8080/ zu. xxx/duty?time=2017- 07-07 14:57:22', es muss domänenübergreifend darauf zugegriffen werden. Bei direktem Zugriff wird XMLHTTPRequest nicht geladen gemeldet http://10.1.5.11:8080/xxx/duty? time=2017-07-07 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 die Proxytabelle im Webpack konfigurieren und finden index.js in der Konfiguration wie folgt:

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'即可
    }
   }

Domänenübergreifender Erfolg, aber das ist nur der Fall. Das domänenübergreifende Problem wird in der Entwicklungsumgebung (dev) gelöst. Wenn es tatsächlich auf dem Server in der Produktionsumgebung bereitgestellt wird, treten weiterhin domänenübergreifende Probleme auf Der von uns bereitgestellte Server-Port ist nicht vom gleichen Ursprung, was ein gemeinsames Debuggen des Front-Ends und des Back-Ends erfordert. Es kann in der Konfiguration separat getestet werden /dev.env.js und prod.env.js, also in der Entwicklungs-/Produktionsumgebung, konfigurieren die angeforderte Adresse API_HOST. In der Entwicklungsumgebung verwenden wir die obige Konfiguration. Die Proxy-Adress-API verwendet die normale Schnittstellenadresse in der Produktionsumgebung, also konfigurieren Sie es wie folgt. Nehmen Sie die folgenden Konfigurationen in den Dateien config/dev.env.js und prod.env.js 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 können Sie http://10.1.5.11:8080/ sowohl in Entwicklungs- als auch in Produktionsumgebungen direkt 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.:

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

Dann konfiguriert der Backend-Server im zweiten Schritt domänenübergreifendes Cros, also access-control-allow-origin: *Alle Zugriffe bedeuten . 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.

1. Axios sendet ein Problem mit der Post-Anfrage

Beim Senden einer Post-Anfrage wird im Allgemeinen der Inhaltstyp festgelegt, der Typ des zu sendenden Inhalts, Anwendung/JSON bezieht sich auf das Senden eines JSON-Objekts. Sie müssen es jedoch im Voraus stringifizieren. 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'}

1. Verwendung von Abfangjägern

Wenn wir eine Adressseite besuchen, werden wir manchmal aufgefordert, uns erneut anzumelden, bevor wir die Seite besuchen. Dies ist eine ungültige Identitätsauthentifizierung. Beispielsweise geht das Token verloren oder das Token ist lokal noch vorhanden, aber abgelaufen. 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.

 我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// 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) 
  });

下面看下

vue cli脚手架前端调后端数据接口时候的本地代理跨域问题，如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的，相当于浏览器设置了一到门槛，会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn't

pass access control…. 为什么跨域同源非同源自己去查吧，在webpack配置一下proxyTable就OK了，如下 config/index.js

dev: {
  加入以下
  proxyTable: {
   '/api': {
    target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'
        //这里理解成用‘/api'代替target里面的地址，
        后面组件中我们掉接口时直接用api代替 比如我要调
        用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可
    }
   }
  }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue渲染时闪烁应如何处理

js获取ModelAndView需要哪些步骤

小程序分享页面返回上一页步骤详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der vue-cli+axios-Anfrage und der domänenübergreifenden Implementierungsschritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!