Home  >  Article  >  Web Front-end  >  What are the three methods for cross-domain implementation in Axios?

What are the three methods for cross-domain implementation in Axios?

coldplay.xixi
coldplay.xixiOriginal
2020-08-20 13:15:1722294browse

Three ways to implement cross-domain axios: 1. Reference axios in [mian.js], the code is [Vue.prototype.$axios = axios]; 2. Reference axios in the page, the code is [this.$axios.post('/api/].

What are the three methods for cross-domain implementation in Axios?

##Three ways to achieve cross-domain axios:

1. mian.js refers to axios

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

2.Add the following code in the dev of config/index.js

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

3. Quote in the page

this.$axios.post('/api/userlogin/login', Qs.stringify({ username: this.username, password: this.password }))
 
.then((response) => {
 
    console.log(response)
 
})
 
.catch((response) => {
 
    console.log(response)
 
})

Related learning recommendations:

js video tutorial

The above is the detailed content of What are the three methods for cross-domain implementation in Axios?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn