在vue中二次封装axios代码详细版以及跨域问题（持续更新中）

目录

什么是axios

 什么是跨域

跨域之前需要知道什么是同源策略

二次封装

---

什么是axios

Axios，是一个基于promise [5]  的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

 什么是跨域

当一个请求路径的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。

跨域之前需要知道什么是同源策略

是浏览器最核心也最基本的安全功能，如果缺少了它，可能会对浏览器的正常功造成极大的影响。

作用：同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。

如果不设置同源策略：非同源下的 cookie 等隐私数据可以被随意获取 以及 DOM 可以的随意操作 ajax 也可以任意请求，一些隐私数据有可能会泄露，对用户和个人造成不同程度的损失

实现跨域的几种方法（非原创）https://blog.csdn.net/weixin_43359799/article/details/123133558?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166747190916800192297875%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166747190916800192297875&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-123133558-null-null.142%5Ev62%5Epc_search_tree,201%5Ev3%5Econtrol_1,213%5Ev1%5Et3_esquery_v1&utm_term=%E6%80%8E%E4%B9%88%E8%B7%A8%E5%9F%9F&spm=1018.2226.3001.4187

二次封装

在根目录下 创建一个文件夹叫request，里面创建一个index.js文件

import axios from "axios";//引入axios

const instance = axios.create({ 
    baseURL: 'https://api.it120.cc/small4' , //公共请求地址
    timeout: 3000 , //设置超时时间 
    
  });


  instance.interceptors.request.use(function (config) {//请求拦截
    return config;
  }, function (error) {//错误处理
    return Promise.reject(error);
  });


instance.interceptors.response.use(function (response) {//响应拦截
    return response
  }, function (error) {//错误处理
    return Promise.reject(error);
  });
  export default instance

在main.js中引入并挂载到实例上，在想要使用的页面直接this.$http.get('路径')即可完成请求

import request from './request'//引入

Vue.prototype.$http = request//挂载

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

对你有帮助请点个赞。