前端
关注
分享
扫一扫
StoneHui_
React | Vue | 微信小程序 | Android | Flutter | 微信小游戏
展开
-
Vite2 + React + Antd 踩坑指南
process is not defined报错：Uncaught ReferenceError: process is not defined解决方案：// 使用 import.meta.env 替换 process.envprocess.env --> import.meta.env# .env# 字段名必须以 VITE_ 开头，否则不会暴露到 import.meta.env 中VITE_APP_VERSION = "1.0.0"Property ‘env’ does n原创 2021-02-28 22:05:52 · 3550 阅读 · 0 评论 -
使用 Vite2 构建 React + Antd 项目
Vite2、React、Antd什么是 Vite？Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的面向未来的前端开发服务器和构建工具。Vite 利用浏览器原生 ES Module 去解析 imports，在服务器端按需编译返回，跳过了打包的概念，服务器随起随用。同时不仅支持 Vue 和 React，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。创建项目# 使用 npm 创建 React 模板的项目 m.原创 2021-02-28 22:01:02 · 3301 阅读 · 1 评论 -
降域 & postMessage
同源策略 & 跨域iframe 跨域由于同源策略的限制，使用 iframe 标签引入非同源的资源，在外部操作 iframe 中的 DOM 元素将会被浏览器阻止并报错。假设有两个域名：blog.sch.com、game.sch.com。在 blog 的页面中加载 game 的页面，并操作其中的 DOM 元素。<body> <div>This is outside window.</div> <iframe src="https:/.原创 2020-12-24 21:23:18 · 458 阅读 · 1 评论 -
CORS 跨域原理
同源策略&跨域什么是 CORS？CORS 全称 Cross-Origin Resource Sharing，即跨域资源共享。CORS 是一种基于 HTTP Header 的机制，该机制通过允许服务器标示除了它自己以外的其它域。服务器端配合浏览器实现 CORS 机制，可以突破浏览器对跨域资源访问的限制，实现跨域资源请求。CORS 验证机制CORS 的验证机制分两种模式：简单请求和预检请求。简单请求简单请求模式下浏览器直接发送请求，并在请求头中携带 Origin。 服务器端接到请求.原创 2020-12-22 12:37:39 · 1771 阅读 · 0 评论 -
JSONP 跨域原理
同源策略： 为保护用户信息安全，防止恶意网站窃取用户数据，浏览器限制本域中的脚本只能访问本域中的资源。同源判断： 协议、域名、端口号三者完全一致视为同源，即属于同一个域。跨域： 请求非同源的资源即为跨域。什么是 JSONP？JSONP（JSON with Padding）是资料格式JSON的一种“使用模式”，可以让网页从别的网域获取资料。 —— 维基百科JSONP 核心原理script 标签不受同源策略影响。动态插入到 DOM 中的 script 脚本可以立即得到执行。实现步骤.原创 2020-12-17 11:06:52 · 466 阅读 · 1 评论 -
同源策略 & 跨域
同源策略为保护用户信息安全，防止恶意网站窃取用户数据，浏览器限制本域中的脚本只能访问本域中的资源，这就是同源策略。同源的定义如果两个 URL 的 protocol、host、port 三者都相同的话，则这两个 URL 是同源，即属于同一个域。源的继承在页面中通过 about:blank 或 javascript: URL 执行的脚本会继承打开该 URL 的文档的源，因为这些类型的 URL 没有包含源服务器的相关信息。源的修改可以通过设置 document.domain 为当前域或者当前域的父域原创 2020-12-18 11:09:25 · 232 阅读 · 1 评论