How to realize Vue to integrate Axios, call, cross-domain and configure multiple cross-domain

This article introduces the relevant knowledge of "how to achieve Vue integration Axios, call, cross-domain, and configure multiple cross-domain". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Foreword:

Axios is a JavaScript library recommended by vue for data interaction with backend (Java, go, Python, PHP). You can exchange data with backend quickly and efficiently through axios library, which is a complex function such as file upload.

JavaScript library: Axios

Install Axios:

Switch the command prompt to the project directory and enter "npm install vue-axios-- save" to install, and paste the following in main.js after installation:

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

The installation is completed.

Call axios:

After installation, you can directly refer to the example of the official documentation of axios and replace axios with this.$axios on the official website to complete the call.

Example:

Simple request:

This.$axios.get ('/ user?ID=12345') .then (function (response) {console.log (response);}) .catch (function (error) {console.log (error);})

Programmatic request:

This.$axios ({method: 'post', url:' / user/12345', data: {firstName: 'Fred', lastName:' Flintstone'}})

All requests perfectly support the official Api of axios. On the basis of the original api, you only need to replace axios with this.$axios, and other parts can follow the official example.

How to achieve cross-domain:

What is cross-domain: it is cross-domain when any one of the protocols, domain names and ports of a request url is different from the current page url.

In the front-end development, the cross-domain problem needs to be solved jointly by the front-end and the back-end, especially in the debugging and development stage, the front-end configuration cross-domain is very important and necessary.

In the configuration of cross-domain, vue.config.js+axios is required to carry out joint development, so as to achieve the cross-domain capability of the front end, and realize data exchange with the back-end without cross-domain configuration, so as to speed up the development progress.

1. Vue.config.js (if not, create a new one in the root directory) The specific code is as follows (can be copied directly): 2, / / Vue.config.js configuration options 3, 4, module.exports = {5, publicPath: ". /", 6, / / output directory 7 at the time of construction, outputDir: "dist", 8, / / directory where static resources are placed 9, assetsDir: "static", 10, transpileDependencies: [/ * string or regex * /] 11. / / whether to generate source map 12, productionSourceMap: false, 13, devServer: {14, open: true, 15, host: 'localhost', 16, port: 8080, 17, https: false, 18, / / above ip and ports are native to us The following is for 19, proxy: {/ / configure cross-domain 20,'/ ks': {21, target: 'http://search.kuwo.cn', / / the address in the background here to simulate You should fill in your real backend interfaces 22, ws: true, 23, changOrigin: true, / / allow cross-domain 24, pathRewrite: {25,'^ / ks':'/ / request using this api can be 26,} 27,}, 28,'/ kp': {29, target: 'http://antiserver.kuwo.cn', / / simulated by the backend address here You should fill in your real backend interface 30, ws: true, 31, changOrigin: true, / / allow cross-domain 32, pathRewrite: {33,'^ / kp':'/ / request using this api can be 34,} 35,} 36,} 37, 38,}, 39,}

2. How to make cross-domain calls:

Add the name of pathRewrite to the original api developed by axios before the link, such as:

Programmatic request:

This.$axios ({method: 'post', url:' / ks/user/12345', data: {firstName: 'Fred', lastName:' Flintstone'}})

The cross-domain function can be realized.

Configure multiple realms:

In our actual development, we often need to call the development of api links may be different (for example: picture link api is a.com, weather link is b.com), then we need to configure two cross-domain when debugging.

Sample code:

40. Module.exports = {41, publicPath: ". /", 42, / / output directory 43 at build time, outputDir: "dist", 44, / / directory where static resources are placed 45, assetsDir: "static", 46, transpileDependencies: [/ * string or regex * /], 47, / / whether source map? 48, productionSourceMap: false, 49, devServer: {50, open: true are generated for production environment construction 51, host: 'localhost', 52, port: 8080, 53, https: false, 54, / / above ip and ports are native to us The following is simulated for 55, proxy: {/ / configure cross-domain 56,'/ image: {57, target: 'http://a.com', / / the address in the background here You should fill in your real backend interfaces 58, ws: true, 59, changOrigin: true, / / allow cross-domain 60, pathRewrite: {61,'^ / image':'/ / request using this api can be 62,} 63,}, 64,'/ wt': {65, target: 'http://antiserver.kuwo.cn', / / simulated by the backend address here You should fill in your real backend interface 66, ws: true, 67, changOrigin: true, / / allow cross-domain 68, pathRewrite: {69,'^ / wt':'/ / request using this api can be 70,} 71,} 72,} 73, 74,}, 75,}

At this point, if we need to make a cross-domain request.

Request picture:

This.$axios ({method: 'post', url:' / image/user/12345', data: {firstName: 'Fred', lastName:' Flintstone'}})

Request weather:

This.$axios ({method: 'post', url:' / wt/user/12345', data: {firstName: 'Fred', lastName:' Flintstone'}})

Note:

1. Cross-domain configuration refers to cross-domain running in the local npm environment. After packaging, you still need server support and back-end support. Packaging directly above and below will not cross-domain.

2. When configuring multiple cross-domains, please note that the first name must be the same.

Example:

Realize cross-domain interaction with Kuwo music based on EuiAdmin+axios, and realize music player example:

"how to achieve Vue integration of Axios, calling, cross-domain, configuration of multiple cross-domain" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!