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

1.在main.js中配置

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

2.在vue.config.js中配置

注:首选我们得先创建一个vue.config.js

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

3.测试axios

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

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

封装自己的axios请求函数

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

import axios from 'axios';

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

axios配置参数

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