在vue中如何解决axios跨域问题(满满的干货)

时间：2025-03-10 15:28:35

详细步骤如下

    • 1.在中配置
    • 2.在中配置
    • 3.测试axios
    • 封装自己的axios请求函数
    • axios配置参数

1.在中配置

import Vue from 'vue';
import axios from 'axios';
.$http=axios;
//默认的根路径
 = '/api'
//设置响应请求头
['Content-Type'] = 'application/json';

2.在中配置

注:首选我们得先创建一个

 = {
		devServer: {
		    open: true, //是否自动弹出浏览器页面
		    host: "localhost", 
		    port: '8081',
		    https: false,
		    hotOnly: false, 
		    proxy: {
		        '/api': {
		            target: 'https:///api', //API服务器的地址
		            changeOrigin: true,
		            pathRewrite: {
		                '^/api': ''
		            }
		        }
		    },
		}
	}

3.测试axios

注:这里随便找个组件进行测试,查看效果(跨域问题解决了,好开心啊!!!)

let url =  + 域名（网址）
	this.$http(url).then(res => {
		return res
	},error => error)

封装自己的axios请求函数

首先得自己手动创建一个文件,然后把下面内容复制上去,自己的axios请求函数就创建好了

import axios from 'axios';

export function request(config) {
	//1.创建axios实例
	const instance = ({
		baseURL: '地址如：http://123.207.32.32:8000',
		timeout: 5000
	})
	//axios拦截器
	//请求拦截器的使用
	(config => {
		return config;
	},err => {
		// (err);
	})
	
	//响应拦截器的使用  用于获取响应数据
	(res => {
		return ;
	},err => {
		(err);
	})
	
	//3.发送真正的网络请求
	return instance(config);
}

axios配置参数

/*
axios配置参数:
	baseURL 配置的域名
	timeout:请求超时时长
	url:请求路径
	methods:请求方法  get/post/put/patch/delete
	params: 请求参数拼接在url上
	data:请求参数请求体中
	
优先级： axios请求配置 > axios实例配置 > axios全局配置 
	axios实例  () 返回的是一个promise对象
*/

相关文章