Vue 调试访问本地后端接口配置

Vue 调试访问本地后端接口配置

记录一下本地测试前端的时候怎么访问本地后端接口。时间太长容易忘。。。。

1、首先要知道前端在访问后端的时候是怎么加上后端接口地址的。

如下图，找到封装http请求的文件，src/utils/rerquest.js
该图中的baseURL就是访问时我们加上的后端请求地址。
baseURL: process.env.VUE_APP_BASE_API 表示baseURL使用的是环境变量中的VUE_APP_BASE_API这个参数

在本地测试前端的时候使用的命令一般都是npm run dev
然后dev使用的默认环境变量文件是 .env.development
简单来说，只要在.env.development中配置了VUE_APP_BASE_API参数，那么在本地测试的时候默认使用的后端地址就是在这个文件中配置的地址。

一篇看懂 vue 如何做调试后台接口的配置和 proxy 的工作原理 以及为什么能解决跨域

之前也做过不少vue项目了，每次跟后台配合的时候，有些配置总是会忘记，感觉每次的解决方案和上一次的都不一样，所以这次准备详细的记录一下，如何做配置，以及一些配置的含义

话不多说 直接开始

1.首先要想调取后台接口一定要引入的就是axios，所以第一步就是下载 axios

npm install axios

2.在需要调用接口的页面引入axios

import axios from 'axios'

2.1发送请求

axios({
        method: "post",
        url: "接口地址",
        data: this.data,
        headers: { "Content-Type": "multipart/form-data" },
      }).then(e => {
        console.log(e)
      })

此时不出意外控制台应该是报错了，应该是报的跨域的错，此时就要做一下对vue.config.js 文件的配置

2.2 vue.config.js
为什么要配置这么文件呢，配置这个文件的目的是什么呢？
因为我们知道浏览器和服务器之间会存在跨域问题，但是两个服务器之间确实可以随意访问的，所以我们要配置一个代理服务器来调用用服务器的接口，如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器，此时可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer: {
    port: '9080',
    open: true,
    proxy: {
      '/api': {
        target: 'http://192.168.2.108:9080/crm',//代理地址，这里设置的地址会代替axios中设置的baseURL
        secure: false, //如果是https接口需要进行此配置 
        changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
        //pathRewrite方法重写url
        pathRewrite: {
          '^/api': '/aaa' //如果没有pathRewrite属性 调用的接口就是http://cloud/api/xxx/xxxx 如果有 pathRewrite属性 调用的接口就是 http://cloud/aaa/xxx/xxxx
         }
        }
      }
    },
  },

devServer里面proxy则是关于代理的配置，该属性为对象的形式，对象中每一个属性就是一个代理的规则匹配

属性的名称是需要被代理的请求路径前缀，一般为了辨别都会设置前缀为/api，值为对应的代理匹配规则，对应如下：
tip: 如果接口地址没有一个统一的前缀 如 /api 可以设置一个 axios.defaults.baseURL = ‘/api’ 即可为所有接口地址添加一个统一的前缀 /api

target：表示的是代理到的目标地址
pathRewrite：默认情况下，我们的 /api 也会被写入到URL中，如果希望删除，可以使用pathRewrite 如果你的接口中本身就带有 /api 可以不写 pathRewrite
secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false
changeOrigin：它表示是否更新代理后请求的 headers 中host地址

3.工作原理

proxy实质就是一个代理服务器 这样就能理解 proxy 工作原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器

举个例子：

在开发阶段，本地地址为http://localhost:3000，该浏览器发送一个前缀带有/api标识的请求到服务端获取数据，但响应这个请求的服务器只是将请求转发到另一台服务器中

说的再通俗一点 就是 A（浏览器） 想认识（发请求） C（服务器） 但是 由于碍于面子(同源政策) 只能 通过 B（proxy） 来介绍，也就是 A 发送请求给 B 再由 B 转发请求给 C

4.跨域

在开发阶段，devServer 会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在 localhost的一个端口上，而后端服务又是运行在另外一个地址上

所以在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题

通过设置 proxy 实现代理请求后，相当于浏览器与服务端中添加一个代理者

当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地

在代理服务器传递数据给本地浏览器的过程中，两者同源，并不存在跨域行为，这时候浏览器就能正常接收数据

到此这篇关于Vue 调试访问本地后端接口配置的文章就介绍到这了,更多相关vue后端接口配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论