Detailed explanation of vue-cli+axios request and cross-domain implementation steps

This time I will bring you a detailed explanation of the vue-cli axios request and cross-domain implementation steps. What are the precautions for vue-cli axios request and cross-domain implementation? The following is a practical case. Let’s take a look. one time.

• Install axios

cnpm install axios --save

• Introduce axios into the file where you want to use axios

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

• Set the proxy in the config/index.js file

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

Try it, the cross-domain is successful, but this knowledge can be solved in the development environment (dev) Cross-domain problems have been solved. If deployed to the server in a production environment, there will still be cross-domain problems if it is from a non-original source.

axios request method

Get request

 // 向具有指定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);
   });

post request

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

Supplement:

##axios in vue solves cross-domain problems and interceptor usage

1. Axios in vue does not support vue.use() method declaration. So there are two ways to solve this:

The first one: introduce axios in main.js, and then set it as a property on the vue prototype chain, so that this.axios can be directly accessed in the component Using

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

One thing to note here is that it is invalid to use this to copy the requested data to data in axios. You can use arrow functions to solve this problem.

1. The local proxy cross-domain problem when the vue cli scaffolding front-end adjusts the back-end data interface, for example, I access the interface on localhost http://10.1.5.11:8080/xxx/duty?time=2017- 07-07 14:57:22', it must be accessed across domains. If accessed directly, XMLHTTPRequest can not load will be reported http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'. Response to preflight request doesn't pass access control….

Why is there a cross-domain problem? Because this is mutual communication between non-original sources, you can go to Google to learn more about it. Here you only need to configure the proxyTable in webpack and it will be OK. Find index.js in the config as follows:

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

Cross-domain success, but this is just The cross-domain problem is solved in the development environment (dev). If it is actually deployed on the server in the production environment, there will still be cross-domain problems if it is not from the same origin. For example, the server port we deployed is 3001, which requires joint debugging of the front and back ends. The first step is for the front end. It can be tested separately in production and development environments. In config/dev.env.js and prod.env.js, that is, in the development/production environment, configure the requested address API_HOST respectively. In the development environment, we use the above configuration. The proxy address api, the normal interface address is used in the production environment, so the configuration is done in two files:

config/dev.env.js and prod.env.js The following configuration.

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/"'
}

Of course, you can directly request http://10.1.5.11:8080// in both development and production environments. After configuration, the program will automatically determine whether it is a development or production environment during testing, and then automatically match API_HOST. We can use process.env.API_HOST in any component to use the address, such as:

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

Then in the second step, the backend server configures cros cross-domain, which is access-control-allow-origin: *All access means . To sum up: In a development environment, our front-end can configure a proxy to cross-domain. In a real production environment, we need the cooperation of the back-end. A certain expert said: This method is not easy to use in IE9 and below. If compatibility is required, the best way is to add a proxy to the server port on the backend. The effect is similar to the webpack proxy during development.

1. Axios sends get post request problem

When sending a post request, you generally need to set Content-Type, the type of content to be sent, application/json refers to sending a json object But you need to stringify it in advance. application/xxxx-form refers to sending? In the format of a=b&c=d, you can use the qs method to format it. qs will be installed automatically after installing axios. You only need to import it in the component.

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

1. The use of interceptors

When we visit an address page, we are sometimes required to log in again before visiting the page, which is identity authentication. Invalid, such as the token is lost, or the token still exists locally, but it has expired, so simply judging whether there is a local token value cannot solve the problem. At this time, the server returns a 401 error when requesting, indicating an authorization error, that is, there is no right to access the page.

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

// 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需要哪些步骤

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

The above is the detailed content of Detailed explanation of vue-cli+axios request and cross-domain implementation steps. For more information, please follow other related articles on the PHP Chinese website!