How axios operates data request methods and cross-domain processing
This time I will show you how axios operates data request methods and cross-domain processing. What are the precautions for axios operating data request methods and cross-domain processing. The following is a practical case. Let’s take a look. .
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);
}); axios.post('/user', {
userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});Added:
##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 Usingimport 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);
})
}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'即可
}
}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/"'
}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中文网其它相关文章！
推荐阅读：
The above is the detailed content of How axios operates data request methods and cross-domain processing. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Use ddrescue to recover data on Linux
Mar 20, 2024 pm 01:37 PM
DDREASE is a tool for recovering data from file or block devices such as hard drives, SSDs, RAM disks, CDs, DVDs and USB storage devices. It copies data from one block device to another, leaving corrupted data blocks behind and moving only good data blocks. ddreasue is a powerful recovery tool that is fully automated as it does not require any interference during recovery operations. Additionally, thanks to the ddasue map file, it can be stopped and resumed at any time. Other key features of DDREASE are as follows: It does not overwrite recovered data but fills the gaps in case of iterative recovery. However, it can be truncated if the tool is instructed to do so explicitly. Recover data from multiple files or blocks to a single
Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation!
Apr 03, 2024 pm 12:04 PM
0.What does this article do? We propose DepthFM: a versatile and fast state-of-the-art generative monocular depth estimation model. In addition to traditional depth estimation tasks, DepthFM also demonstrates state-of-the-art capabilities in downstream tasks such as depth inpainting. DepthFM is efficient and can synthesize depth maps within a few inference steps. Let’s read about this work together ~ 1. Paper information title: DepthFM: FastMonocularDepthEstimationwithFlowMatching Author: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr
How to use Excel filter function with multiple conditions
Feb 26, 2024 am 10:19 AM
If you need to know how to use filtering with multiple criteria in Excel, the following tutorial will guide you through the steps to ensure you can filter and sort your data effectively. Excel's filtering function is very powerful and can help you extract the information you need from large amounts of data. This function can filter data according to the conditions you set and display only the parts that meet the conditions, making data management more efficient. By using the filter function, you can quickly find target data, saving time in finding and organizing data. This function can not only be applied to simple data lists, but can also be filtered based on multiple conditions to help you locate the information you need more accurately. Overall, Excel’s filtering function is a very practical
Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training
Apr 01, 2024 pm 07:46 PM
The performance of JAX, promoted by Google, has surpassed that of Pytorch and TensorFlow in recent benchmark tests, ranking first in 7 indicators. And the test was not done on the TPU with the best JAX performance. Although among developers, Pytorch is still more popular than Tensorflow. But in the future, perhaps more large models will be trained and run based on the JAX platform. Models Recently, the Keras team benchmarked three backends (TensorFlow, JAX, PyTorch) with the native PyTorch implementation and Keras2 with TensorFlow. First, they select a set of mainstream
Slow Cellular Data Internet Speeds on iPhone: Fixes
May 03, 2024 pm 09:01 PM
Facing lag, slow mobile data connection on iPhone? Typically, the strength of cellular internet on your phone depends on several factors such as region, cellular network type, roaming type, etc. There are some things you can do to get a faster, more reliable cellular Internet connection. Fix 1 – Force Restart iPhone Sometimes, force restarting your device just resets a lot of things, including the cellular connection. Step 1 – Just press the volume up key once and release. Next, press the Volume Down key and release it again. Step 2 – The next part of the process is to hold the button on the right side. Let the iPhone finish restarting. Enable cellular data and check network speed. Check again Fix 2 – Change data mode While 5G offers better network speeds, it works better when the signal is weaker
Tesla robots work in factories, Musk: The degree of freedom of hands will reach 22 this year!
May 06, 2024 pm 04:13 PM
The latest video of Tesla's robot Optimus is released, and it can already work in the factory. At normal speed, it sorts batteries (Tesla's 4680 batteries) like this: The official also released what it looks like at 20x speed - on a small "workstation", picking and picking and picking: This time it is released One of the highlights of the video is that Optimus completes this work in the factory, completely autonomously, without human intervention throughout the process. And from the perspective of Optimus, it can also pick up and place the crooked battery, focusing on automatic error correction: Regarding Optimus's hand, NVIDIA scientist Jim Fan gave a high evaluation: Optimus's hand is the world's five-fingered robot. One of the most dexterous. Its hands are not only tactile
The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks
Apr 29, 2024 pm 06:55 PM
I cry to death. The world is madly building big models. The data on the Internet is not enough. It is not enough at all. The training model looks like "The Hunger Games", and AI researchers around the world are worrying about how to feed these data voracious eaters. This problem is particularly prominent in multi-modal tasks. At a time when nothing could be done, a start-up team from the Department of Renmin University of China used its own new model to become the first in China to make "model-generated data feed itself" a reality. Moreover, it is a two-pronged approach on the understanding side and the generation side. Both sides can generate high-quality, multi-modal new data and provide data feedback to the model itself. What is a model? Awaker 1.0, a large multi-modal model that just appeared on the Zhongguancun Forum. Who is the team? Sophon engine. Founded by Gao Yizhao, a doctoral student at Renmin University’s Hillhouse School of Artificial Intelligence.
Alibaba 7B multi-modal document understanding large model wins new SOTA
Apr 02, 2024 am 11:31 AM
New SOTA for multimodal document understanding capabilities! Alibaba's mPLUG team released the latest open source work mPLUG-DocOwl1.5, which proposed a series of solutions to address the four major challenges of high-resolution image text recognition, general document structure understanding, instruction following, and introduction of external knowledge. Without further ado, let’s look at the effects first. One-click recognition and conversion of charts with complex structures into Markdown format: Charts of different styles are available: More detailed text recognition and positioning can also be easily handled: Detailed explanations of document understanding can also be given: You know, "Document Understanding" is currently An important scenario for the implementation of large language models. There are many products on the market to assist document reading. Some of them mainly use OCR systems for text recognition and cooperate with LLM for text processing.
