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?

Aug 20, 2020 pm 01:15 PM
axios Cross domain

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if 'Uncaught (in promise) Error: Request failed with status code 500' occurs when using axios in a Vue application? What should I do if 'Uncaught (in promise) Error: Request failed with status code 500' occurs when using axios in a Vue application? Jun 24, 2023 pm 05:33 PM

It is very common to use axios in Vue applications. axios is a Promise-based HTTP client that can be used in browsers and Node.js. During the development process, the error message "Uncaught(inpromise)Error: Requestfailedwithstatuscode500" sometimes appears. For developers, this error message may be difficult to understand and solve. This article will explore this

What should I do if 'TypeError: Failed to fetch' occurs when using axios in a Vue application? What should I do if 'TypeError: Failed to fetch' occurs when using axios in a Vue application? Jun 24, 2023 pm 11:03 PM

Recently, during the development of Vue applications, I encountered a common problem: "TypeError: Failedtofetch" error message. This problem occurs when using axios to make HTTP requests and the backend server does not respond to the request correctly. This error message usually indicates that the request cannot reach the server, possibly due to network reasons or the server not responding. What should we do after this error message appears? Here are some workarounds: Check your network connection due to

Choice of data request in Vue: Axios or Fetch? Choice of data request in Vue: Axios or Fetch? Jul 17, 2023 pm 06:30 PM

Choice of data request in Vue: AxiosorFetch? In Vue development, handling data requests is a very common task. Choosing which tool to use for data requests is a question that needs to be considered. In Vue, the two most common tools are Axios and Fetch. This article will compare the pros and cons of both tools and give some sample code to help you make your choice. Axios is a Promise-based HTTP client that works in browsers and Node.

How to solve the problem of 'Error: Network Error' when using axios in Vue application? How to solve the problem of 'Error: Network Error' when using axios in Vue application? Jun 25, 2023 am 08:27 AM

How to solve the problem of "Error: NetworkError" when using axios in Vue application? In the development of Vue applications, we often use axios to make API requests or obtain data, but sometimes we encounter "Error: NetworkError" in axios requests. What should we do in this case? First of all, you need to understand what "Error:NetworkError" means. It usually means that the network connection

Efficiently utilize Vue and Axios to implement batch processing of front-end data Efficiently utilize Vue and Axios to implement batch processing of front-end data Jul 17, 2023 pm 10:43 PM

Efficiently utilize Vue and Axios to implement batch processing of front-end data. In front-end development, data processing is a common task. When we need to process a large amount of data, processing the data will become very cumbersome and inefficient if there is no effective method. Vue is an excellent front-end framework, and Axios is a popular network request library. They can work together to implement batch processing of front-end data. This article will introduce in detail how to efficiently use Vue and Axios for batch processing of data, and provide relevant code examples.

Solution to PHP Session cross-domain problem Solution to PHP Session cross-domain problem Oct 12, 2023 pm 03:00 PM

Solution to the cross-domain problem of PHPSession In the development of front-end and back-end separation, cross-domain requests have become the norm. When dealing with cross-domain issues, we usually involve the use and management of sessions. However, due to browser origin policy restrictions, sessions cannot be shared by default across domains. In order to solve this problem, we need to use some techniques and methods to achieve cross-domain sharing of sessions. 1. The most common use of cookies to share sessions across domains

What should I do if 'TypeError: bind is not a function' occurs when using axios in a Vue application? What should I do if 'TypeError: bind is not a function' occurs when using axios in a Vue application? Jun 25, 2023 am 08:31 AM

In Vue.js applications, it is very common to use axios. Axios is a powerful HTTP request library that allows you to easily send asynchronous HTTP requests. However, when using axios, you will encounter some errors, one of which is "TypeError: bindisnotafunction". This error is usually caused by the axios version being incompatible with Vue.js. Let’s take a look at the solutions to this error. First, we need

Vue and Axios implement synchronous processing of asynchronous data requests Vue and Axios implement synchronous processing of asynchronous data requests Jul 17, 2023 am 10:13 AM

Vue and Axios implement synchronous processing of asynchronous data requests Introduction: In modern front-end development, because the page needs to obtain data through asynchronous data requests and dynamically display it, asynchronous processing has become an inevitable requirement. However, asynchronous data requests often cause code logic to become complex and difficult to maintain. In the Vue framework, the Axios library can be used to easily implement synchronous processing of asynchronous data requests, thereby improving the readability and maintainability of the code. 1. Introduction to Vue Vue is a lightweight front-end framework.

See all articles