2024年前端最全怎么实现跨域？配置vue跨域proxy，jsonp跨域很简单，阿里Web前端岗面试百题

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

// 可以直接设置跨域的地址

proxy: {

“/api”: {

target: “https://sug.so.360.cn”,

changeOrigin: true, //允许跨域

pathRewrite: {

“^/api”: “”,

},

},

},

// 不是所有的接口都要跨域 也可以给需要跨域的接口起一个识别的名字

// 只有前面带/api的接口才会跨域 其他的接口正常访问

},

};

// proxy跨域其实也是一种代理跨域 可以理解为欺骗浏览器 让浏览器以为没有跨域 访问的还是8080 ，但是服务器看到/api就会把地址变成需要跨域的地址

// 该配置文件修改了 要重新启动

封装axios里面

// 封装axios请求的模块

import axios from ‘axios’

// 用axios重新生成了请求的实例

const server = axios.create({

baseURL: ‘’, // 项目发送axios请求的公共地址 值为空

timeout: 5000 // 请求超时时间 这里是请求超过五秒后还没有获得请求结果 提示请求超时

})

server.interceptors.request.use(config => {

// config包含了请求相关的所有信息

// 可以同过config对象给请求配置或者修改信息

config.headers.token = ‘11111’

return config // 将配置完成的token返回 如果不返回 请求不会继续进行

}, err => {

// 请求发生错误时的回调函数

// 这里的意思是请求发送错误时将错误抛出

// throw new Error(err)

// console.error(err) //将错误信息打印在控制台中

Promise.reject(err) // 使用promise将错误信息返回出去

})

// axios 接受到服务器响应信息后的配置

// response 是响应的意思 这里的意思是使用响应拦截

server.interceptors.response.use(res => {

// res包含了服务器返回的所有响应信息 其实就是服务器返回给你的东西

return res.data

}, err => {

// 当服务器响应产生错误时的回调函数

console.error(err) // 这里将服务器发生错误的错误信息打印在控制台中

})

export default server

在请求api的时候

import request from ‘…/network/reques’

const getBanners = async () => {

// /api 加上说明这个接口要跨域

let

data = await request({

url: ‘/api/suggest?word=a’

})

// console.log(data);

return data

}

export {

getBanners

}

jsonp 跨域

1、 ajax 受到同源策略的约束，不允许跨域获取数据，但是我们可以动态的为创建 script 标签，利用 script 的 src 属性 来不受到 同源策略的约束。

1.动态创建(document.createElement(‘script’))

2.设置src 属性，(src中要包含参数callback=fn)进行跨域请求

3.将 添加到页面中执行 （body.appendChild(‘script’)）

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    [外链图片转存中…(img-nZKtjBir-1715534406392)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666