2024年前端最新Vue Axios封装 和 跨域问题(1)，字节跳动客服面试经验_axios vue 跨域

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容

使用封装的 axios 对象

我们之前封装了一个自己的 axios 对象，拦截器也写了，尽管没内容，但是你去网上搜，大部分拦截器的功能是一样的，这个都能用，后面有时间在写，现在呢，我们的使用一下上面封装的 axios 对象。

首先我们在项目 src 目录下在创建一个文件夹 api ，以后我们调接口都在 api 目录下调用，在 api 文件夹下创建一个 test.js 文件，然后在 test.js 中发送异步请求。

// 首先引入我们自定义的axios对象

import request from ‘@/utils/request’

// 创建一个get请求 第一种，不建议使用

// request.get(‘/db.json’).then( rep =>{

// console.log(‘—>’, rep.data)

// })

// 创建一个get请求，第二种，推荐使用

request({

methods: ‘get’,

url:‘/db.json’

}).then( rep =>{

console.log(‘—>’, rep.data)

})

现在我们测试是可以的，但是我们得把这个请求导出，给组件使用，所以把 test.js 修改一下：

// 首先引入我们自定义的axios对象

import request from ‘@/utils/request’

// 创建一个get请求，第二种，推荐使用

// request({

// methods: ‘get’,

// url:‘/db.json’

// }).then( rep =>{

// console.log(‘get—>’, rep.data)

// })

// 导出对象

export default {

getList(){

// 把请求对象返回，提供给组件使用

const req = request({

methods: ‘get’,

url: ‘/db.json’

})

return req

}

}

在组件中使用：

我最棒

{{item.name}}

跨域问题

---

访问采用的是同源策略，是指协议、域名、端口都要相同，其中有一个不同，就会产生跨域问题，浏览器就会限制跨域访问。

跨域问题是前端开发经常遇到的问题，在什么时候会遇到跨域问题呢？首先是前后端分离项目，使用vue开发前端项目了，肯定是前后端分离，我在说一个废话，哈哈哈哈，当前端项目和后端，也就是java后台或者是php后台间，他们的IP地址不一样，或者是端口不一样，这时候就会出现跨域问题。

解决跨域问题

比如，前后端项目开发完成，尽管部署在同一服务器下，IP地址肯定是一样的，但是端口肯定是不一样的，比如前段端口是8888，后端端口是8001，这时候就存在跨域问题，人家不让你调用，气人不！哈哈哈哈嗝~ 更有甚者，人家前端一个服务器，后端一个服务器，哈哈哈哈哈，恐怖！

解决跨域：

1. 通过代理请求的方式解决，将 API 请求通过代理服务器请求到 API 服务器。

2. 开发环境中，在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置，参考：https://cli.vuejs.org/zh/config/#devserver

如下配置：

module.exports = {

devServer: {

port: 8888, // 端口号，如果端口号被占用，会自动提升1

host: “localhost”, //主机名， 127.0.0.1， 真机 0.0.0.0

https: false, //协议

open: true, //启动服务时自动打开浏览器访问

proxy: { // 开发环境代理配置

‘/dev-api’: { // 意思是当请求是以 dev-api 开头的请求，都走代理

// 目标服务器地址，代理访问：http://localhost:8001

target: ‘http://localhost:8001’,

changeOrigin: true, // 开启代理服务器，就会给你代理转发

pathRewrite: {

// /dev-api/db.json 最终会转发到 http://localhost:8001/db.json

‘^/dev-api’: ‘’, // 就是将请求地址中的 /dev-api 前缀替换成空的

}

}

}

},

lintOnSave: false, // 关闭格式检查

productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度

}

再请求的时候加一个前缀 /dev-api

加了前缀之后，加入我们后期要修改前缀，案例就一个接口好修改，但是如果以后成百上千个接口，一个一个改有些许的费劲，所以我们就把前缀抽取出来，修改接口 test.js 文件内容如下：

// 首先引入我们自定义的axios对象

import request from ‘@/utils/request’

// 将前缀抽取出来，以后改的话就改这个地方就行

const BASE_URI = ‘/dev-api’

// 导出对象

export default {

getList(){

// 把请求对象返回，提供给组件使用

const req = request({

methods: ‘get’,

url: BASE_URI + ‘/db.json’ // 拼接前缀

})

return req

}

}

效果是一样的。

如果后期需要修改跨域服务器的地址，就在 在 vue.config.js 文件中使用 devServer.proxy 选项中修改地址就可以了。

配置完跨域需要重启服务，不然不起作用。

OK！ 跨域的问题没有了，现在可以夸我啦！！！

配置不同环境 常量值

---

参考资料：https://cli.vuejs.org/zh/guide/mode-and-env.html

开发环境请求接口数据和生产环境请求接口数据一般是不同的，配置不同环境的目的就是因为接口的不同不至于整天批量改URL。所以为不同的环境配置不同的请求接口 URL，通过路径前的前缀进行匹配，当前只针对的是开发环境，以后如果有生产再说哈。

在项目根目录下创建一个文件，名字叫做 .env.development， 将开发环境的配置项配置到此文件中。

在此文件中配置的各个配置项，都只能在开发环境中使用。

如果在根目录下再创建一个 .env.production 文件，那么在这个文件中所有的配置项，只能在生产环境下使用。

注意名字千万别敲错了哈，不然不管用。

所以，在配置里面，要以 VUE_APP_ 开头。

那什么样的参数/变量一般需要配置呢？ 首先，代理服务器的地址需要可配置，其次代理前缀需要可配置，因为代理服务器生产环境和测试环境肯定不同，而前缀也可能因为服务器的不同而有所改变。

首先在 .env.development 文件写入配置项

只有以 VUE_APP_ 开头的变量会被 webpack 静态嵌入到客户端侧的包中进行使用 process.env.VUE_APP_xxx。

目标服务接口地址，这个地址按照自己服务环境来的,添加修改后需要重启服务

VUE_APP_HT_URL = ‘http://localhost:8001’

开发环境前缀

VUE_APP_BASE_API = ‘/dev-api’

然后修改代理项

module.exports = {

devServer: {

port: 8002, // 端口号，如果端口号被占用，会自动提升1

host: “localhost”, //主机名， 127.0.0.1， 真机 0.0.0.0

https: false, //协议

open: true, //启动服务时自动打开浏览器访问

proxy: { // 开发环境代理配置

// ‘/dev-api’: { // 意思是当请求是以 dev-api 开头的请求，都走代理

// 目标服务器地址，代理访问：http://localhost:8001

target: ‘http://localhost:8001’,

// target: process.env.VUE_APP_HT_URL, // 我改成这种失败了，请求500 大佬知道原因教我！！！

changeOrigin: true, // 开启代理服务器，就会给你代理转发

pathRewrite: {

// /dev-api/db.json 最终会转发到 http://localhost:8001/db.json

// ‘^/dev-api’: ‘’, // 就是将请求地址中的 /dev-api 前缀替换成空的

}

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】