axios 详细使用方法 及跨域请求（反向代理）的处理

摘要： Axios适配器（Adapter）作为其架构中被低估的核心机制，能解决拦截器无法处理的底层通信问题。适配器本质是一个函数，接管请求发送过程，决定传输方式（如HTTP、IPC、小程序API等）。与拦截器关注请求内容不同，适配器控制请求形式，适用于五大场景： 跨平台兼容：统一代码在浏览器、Node.js、小程序等环境运行，如为微信小程序实现wx.request适配器； 底层通信：如Electron中通过IPC通信替代HTTP，保持代码复用性； 缓存优先：请求前检查本地缓存，命中则跳过网络请求； 请求合并

是Vue创建者主推的请求发送方式，因其简单的配置与良好的性能被前端爱好者所喜爱。众所周知，在进行网页设计时经常需要从后端拿数据，在Web应用初期会将整个页面或者文档直接拿过来，随着Web应用的发展，人们对性能的不断提升，逐渐向无页面刷新从后端获取数据，而axios就是其中一种新兴、火热的方式。在学习Vue中使用axios时，不需要太过于了解请求的发送过程，但需要对各种请求方式有一个大致的认识。本文将会从0到1的介绍vue中如何使用axios，并结合项目实例加深大家印象。

在前端开发中, 我们一种常见的网络请求方式就是JSONP使用JSONP最主要的原因往往是为了解决跨域访问的问题。JSONP的原理是什么呢?JSONP的核心在于通过标签的src来帮助我们请求数据。原因是我们的项目部署在服务器上时, 是不能直接访问服务器上的资料的，会产生跨域问题。这个时候, 我们利用标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json。

什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。 当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。 Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...

一.前端逻辑（基于elementUI） 找到我们设置端口的index.js索引文件，定位到proxyTable属性，在其中添加反向代理 代理格式如下： proxyTable: '/api': {//配置反向代理，如果在请求的前面加上/api 就相当于将请求发往http://localhost:80 target: 'http://localhost:80', changeOrigin: true, pathRewrite: { .

开发模式下跨域解决方案与代理服务配置 1、需求 　　前后端分离项目中，需要使用反向代理，已解决跨域访问问题，在这里需要了解正向代理、反向代理等概念， 2、正向代理 正向代理比较好理解，类似于一个跳板，用来代替客户访问外部资源。 例如： A向C借钱，由于一些情况不能直接向C借钱，于是A想了一个办法，他让B去向C借钱，这样B就代替A向C借钱，A就得到了C的钱，C并不知道A的存在，B就充当了A的代理人的角色。 总的来说： 正向代理（forward proxy） ，一个位于客户端和原始服务器之间的服务器，为了从

跨域请求是指浏览器从一个域向另一个域发送请求。这种请求会被浏览器的同源策略阻止，除非目标域明确允许跨域请求。不同的域名（例如从请求不同的端口（例如从请求不同的协议（例如从http请求https跨域请求问题是前后端分离开发中常见的问题，可以通过在后端配置 CORS、在开发环境中使用代理以及其他方法来解决。最优的解决方案是配置后端服务器以允许必要的跨域请求，从而保证应用的安全性和稳定性。希望本文能帮助你全面了解和解决 Vue 项目中使用 Axios 发起跨域请求时遇到的问题。

可以对axios进行配置，简化代码的编写//使用自定义配置baseURL: 'http://localhost:8080' , //url前缀timeout: 1000 , //超时时间headers: {'token' : 'helen123456' } //携带令牌 })

跨域的理解

其原理大致就是我刚刚添加了Axios.defaults.baseURL = '/api'，其每次发送请求都会加一个/api的前缀，这里拦截器拦截api前缀后将其替换为 target。今天在开发中新写了一个前端的项目作为集成，公司是保密项目所以公司代码肯定是不能粘贴了，回家之后还是觉得记录一下比较好，所以自己模拟了一个来给大家解决一下。接下来再看vue.config.js文件，没有就自己创建一个，但是一般都会有，名字不能错。

VUE_APP_RUN_ENV='dev'/'pro'/'test' // 三选一可以自定义名字，按你定义的环境来定，自己分得清就行。NODE_ENV='production' / 'development' // 二选一，一个开发环境一个生产环境，部署服务器要用开发环境的。// error.message = '错误请求'// error.message = '请求超时'// error.message = '网络错误'

一、修改代码： 1.简单请求 //go后端（w为http.ResponseWriter）： w.Header().Set("Access-Control-Allow-Origin", “*”); 2.非简单请求(预检) //go后端（w为http.ResponseWriter）： // 如果需要http请求中带上cookie，需要前后端都设置credentials，且后端设置指定的origin，即域名不能为"*" w.Header().Set("A......

同源策略：就是我我们的浏览器出于安全考虑，只允许与本域（同协议，同域名，同端口的就叫本域）下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。当我们向不同源的网站发起请求时，就会产生跨域问题，（跨域中请求是发送出去了，服务器响应了，但是会被浏览器的同源策略所拦截，使我们不能得到响应）

文章目录前后端分离VUE 发起网络请求最佳实践安装 axios封装本地 网络请求api在 main.js 引入 axios配置代理 前后端分离 Vue作为前端项目，可以独立部署，也可以通过整合直接放入到后端项目中。 VUE 发起网络请求 借助 axios ，我们可以发起网络请求，这是一个不可避免的场景 最佳实践 安装 axios npm i axios -S 封装本地 网络请求api 可以参考 https://github.com/lenve/vhr/blob/master/vuehr/src/util