vue 中是什么实现跨域的
先说说什么是跨域吧？
- 跨域本质就是浏览器基于同源策略的一种安全方式。就是前端通过各种各样的方式避开
浏览器安全限制。同源策略是指：协议域名端口三者一致，如果其中一个不同就产生了跨域行为。 - 跨域的方式有三种
JSONP- get 发请求的时候不太安全，而且携带的数据也很小。
CORS- CORS 是一个系统，它是由一系列传输的 HTTP 头组成的，HTTP 头决定是否阻止前端 JS 代码获取跨域请求的响应。
Proxy- Proxy 是网络代理，网关，路由都有网络代理的功能。客户端通过网络代理与服务器进行非直接的连接。网络代理可以保护隐私安全，防止攻击。
在 vue 项目中，主要针对 CORS，和 Proxy 展开。我使用的是 Proxy，因为我之前做的 vue 项目是通过 Vue-cli 脚手架搭建的。
我用 node 和 axios 在本地起了一个服务器作为代理的请求对象。通过该服务器发送请求给目标服务器，得到结果再返回给前端。最终上线的时候 web 应用和接口服务器不一样也会产生跨域。
我增加了两个文件 axios.js 和 vue.config.js
axios.js
import axios from 'axios'
aixos.defaults.baseURL = "/api"
const $axios = axios
export default $axios
vue.config.js
module.exports = {
devServer: {
proxy: {
"/api": {
target: "目标地址"，
ws: true， // 是否被缓存
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/api": "" // 地址置空
}
}
}
}
}
明天继续探究我再 veu-shequ 这个项目中遇到的难点。
- 没登录之前我记得地址直接跳转带目标地址怎么办呢？
考察路由守卫 watch 监听路由变化
事件监听、事件模型有了解吗，应用场景有哪些呢？
事件流分为三个阶段: 事件捕获阶段 目标阶段 事件冒泡阶段
- 事件捕获是从 window 最外层向内查找触发事件元素，直到找到事件元素，查找的过程中不会触发事件元素事件。
- 目标阶段:是触发事件最底层的元素。
- 事件冒泡阶段阶段：触发事件从最低层开始一层一层的传递到最外层 window
通过
addEventbListener方法绑定事件监听，它有三个参数，第一个参数是绑定什么事件，第二个是函数名，第三个是一个布尔值，默认是 false 为事件冒泡，true 是事件捕获。
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
let list = document.getElementById('list')
list.addEventListener('click',(e)=>{
console.log(e.target.innerHTML)
},false)
</script>
事件代理：就是不给每个子节点绑定事件监听器，绑定在父节点上，通过事件冒泡的原理设置每个子节点。
这样能减少内存消耗和 dom 操作，提高了性能，也能防止 重排 重绘，还能动态绑定事件，父节点新增元素也能够响应绑定事件。
- 事件捕获:是从最外层 window 向下查找到目标元素，查找过程中不会处理响应元素注册的冒泡事件。
- 目标阶段:
触发事件最底层的元素。 - 冒泡阶段:
触发事件从最底层开始一层一层往外传递到 window。
原生事件绑定是通过 document.getElementById('btn1') 获取到节点，然后通过 addEventListener 完成事件绑定。
event.preventDefault() // 阻止默认行为
event.stopPropagation() // 阻止冒泡
