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

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

coldplay.xixi
Release: 2020-08-20 13:15:17
Original
22322 people have browsed it

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
Copy after login

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’即可
 
        }
 
    }
 
}
Copy after login

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)
 
})
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template