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

详细步骤如下

1.在main.js中配置2.在vue.config.js中配置3.测试axios封装自己的axios请求函数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对象 */