Vue 前端基础笔记

Vue 前端基础笔记跨域 Vite 代理 Vue 基础 Axios 全套笔记一、跨域学科主题浏览器安全策略 → 同源策略Same-Origin Policy属于前端网络 / HTTP 协议 / 浏览器安全范畴。二、什么是跨域最直白版1. 同源策略浏览器规定前端所在的 协议、域名、端口 必须和后端完全一样才能直接请求数据。只要有一个不一样就是跨域。2. 什么时候跨域前端http://localhost:5173Vue/Vite 启动的后端http://localhost:8080SpringBoot端口不同 → 跨域浏览器就会报错No Access-Control-Allow-Origin意思后端不允许你访问。三、为什么前端不能直接请求后端接口因为浏览器的安全限制不是后端不让你访问是浏览器拦截目的防止恶意网站偷用户信息防止 CSRF 攻击保护接口不被随意调用不是后端问题是浏览器安全规则。四、怎么解决跨域前端最常用Vite 配置代理1. 什么是代理前端不直接请求后端→让 Vite 开发服务器帮你转发请求→ 浏览器认为是同源不拦截2. vite.config.js 配置代理固定写法import{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue()],// 代理配置server:{proxy:{/api:{target:http://localhost:8080,// 后端地址changeOrigin:true,// 开启跨域rewrite:(path)path.replace(/^\/api/,)}}}})3. 作用前端请求/api/xxx→ 自动转发到http://localhost:8080/xxx→跨域问题解决五、Vue 最基础使用必背1. Vue 组件结构template !-- 页面结构 -- div 根元素只能有一个 /div /template script export default { data() { return { // 数据 } } } /script style /* 样式 */ /style六、Vue 最常用指令必背1. 文本插值{{ name }}data(){return{name:张三}}2. 属性绑定img :srcimgUrl input :valuemsg3. 事件绑定button clickhandleClick按钮/buttonmethods:{handleClick(){}}4. 双向绑定表单input v-modelkeyword5. 条件渲染div v-iftype 1显示1/div div v-else-iftype 2显示2/div div v-else显示3/div6. 列表渲染div v-foritem in list :keyitem.id {{ item.name }} /div七、Axios 网络请求Vue 最常用1. 是什么基于 Promise 的网络请求库前端专门用来调用后端接口。2. 常用方法axios.get(url)axios.post(url,data)axios.put(url,data)axios.delete(url)3. 统一写法最通用axios({method:post,url:/api/user/login,data:{username:,password:}}).then(res{}).catch(err{})八、Axios 最常用完整示例axios.get(/api/order/list).then(res{console.log(res.data)}).catch(err{console.log(err)})九、今天所有知识总结跨域浏览器同源策略导致前端不能直接访问不同端口/域名的后端解决方式Vite 配置proxy代理Vue 组件templatescriptstyle常用指令{{}}:srcclickv-modelv-ifv-forAxios前端请求后端接口工具