前端开发 文章

从JSONP到CORS:跨域解决方案的技术演进与架构思考
前端开发
2024-02-12 0k

从JSONP到CORS:跨域解决方案的技术演进与架构思考

在Web开发领域,CORS(跨源资源共享)是每个前端开发者都会遇到的关键概念。但为什么我们如今使用CORS,而曾经流行的JSONP却逐渐退出历史舞台?本文将带您深入理解跨域解决方案从JSONP到CORS的技术演进历程。 第一部分:理解CORS - 跨域资源共享 什么是CORS? CORS(Cross-Origin Resource Sharing,跨源资源共享)是浏览器强制执行的一种安全机制,用于解决"同源策略"带来的限制。 同源策略要求协议、域名、端口完全相同的请求才被允许。例如: https://www.example.com → https://api.example.com ❌ 跨域 http://localhost:3000 → http://localhost:8080 ❌ 跨域 CORS的工作原理 当浏览器检测到跨域请求时,会执行以下流程: 发送预检请求:对于非简单请求,浏览器先发送OPTIONS请求 服务器响应:后端返回包含CORS头部的响应 浏览器验证:浏览器检查头部,决定是否放行 实际请求:验证通过后发送真正的请求 # 预检请求 OPTIONS /api/data HTTP/1.1 Origin: https://www.example.com Access-Control-Request-Method: POST # 服务器响应 HTTP/1.1 200 OK Access-Control-Allow-Origin: https://www.example.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: Content-Type 为什么配置服务端CORS就能解决问题? 关键在于:CORS的决定权在服务器,浏览器只是执行者。 当您在.NET服务端配置CORS时,有多种方式: ASP.NET Core 全局配置: // Program.cs var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(options => { options.AddPolicy("AllowSpecificOrigin", policy => { policy.

CORS JSONP 跨域
阅读更多
Axios + async/await:你以为的「同时请求」,可能正在串行执行
前端开发
2022-05-12 0k

Axios + async/await:你以为的「同时请求」,可能正在串行执行

一个小小的 await 顺序,可能让你的接口总耗时翻倍 在现代前端开发中,axios 搭配 async/await 几乎是请求接口的标配写法。但很多人可能没意识到:同样是写 await,两个接口的完成时间可能相差一倍。 场景复现 假设你有两个接口:接口 A 和接口 B,每个都需要较长时间才能返回数据(比如各需 10 秒)。 现在你需要在同一个 async 函数里依次请求它们,最后拿到两个数据。 来看这段代码: async function fetchData() { const resA = await axios.get('/api/A'); // 耗时较长 const resB = await axios.get('/api/B'); // 耗时较长 return [resA, resB]; } 问题:这个函数的总执行时间是多长? 等于单个接口的时间? 还是两个接口时间之和? 答案是 两个接口时间之和(例如 10+10=20 秒)。 因为 await 会阻塞后续代码的执行:先等 A 完成,再开始请求 B,两个请求是串行的。 真正的“同时请求”:只需要最慢那个接口的时间 很多时候,接口 A 和接口 B 之间并没有依赖关系(B 不需要 A 的返回结果)。这种情况下,完全可以让它们并行发起,从而把总耗时压缩到 单个最慢接口的耗时。

JavaScript Axios async/await
阅读更多
jQuery给编译后页面中vue变量赋值
前端开发
2022-04-14 0k

jQuery给编译后页面中vue变量赋值

要赋值的input框 <input tabindex="1" type="text" autocomplete="off" placeholder="AppID" name="appId" class="el-input__inner"> 通过name获取对象赋值 $("input[name='appId']").val("24563574-04f5-4a44-848e-84ea81677e34"); 赋值后没有效果,需要触发vue事件 $("input[name='appId']")[0].dispatchEvent(new Event('input'))

JQ vue jQuery
阅读更多
jQuery UI 自动完成组件(Autocomplete)使用
前端开发
2021-06-08 0k

jQuery UI 自动完成组件(Autocomplete)使用

JS: var shopVal=""; var shopText = ""; $(function () { $("#tags").autocomplete({ source: function ( request, response ) { $.ajax({ url: "shop/list", //请求数据网址 data: { AppName: request.term, appId: window.parent.appId //dataType: "jsonp", //也可以是jsonp形式 //text: $("#tags").val() // 等同于 request.term }, success: function (data) { //console.log(data); response(data); } }); }, minLength: 1,//输入多少字的时候触发请求事件 select: function (e, ui) { //选后后事件 shopVal = ui.item.id; shopText = ui.item.value; //alert("value:" + ui.item.value + "lable:" + ui.

jQuery jQuery UI Autocomplete
阅读更多
Node.js包管理工具Yarn、npm安装以及常用命令
前端开发
2020-12-14 0k

Node.js包管理工具Yarn、npm安装以及常用命令

npm NodeJs自带的工具,无需单独安装 # 安装nodejs yum install -y nodejs # 查看安装的版本 node -v # 安装n管理包,安装指定的nodejs版本 npm install -g n # 更新NodeJs版本 # 安装最新版本 n latest # 安装指定定版本 n 8.11.3 如果某些项目编译时提示安装Visual C ++ Build Tools 2017、.net framework 4.5.1、python2.7 执行命令: npm install --global --production windows-build-tools yarn的安装: 下载node.js,使用npm安装 npm install -g yarn #查看版本: yarn --version yarn 淘宝源安装,分别复制粘贴以下代码行到黑窗口运行即可 yarn config set registry https://registry.npm.taobao.org -g yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g 鸣谢:

前端 Node.js Yarn
阅读更多
Vuepress起步
前端开发
2020-03-11 0k

Vuepress起步

1、安装 npm install -g vuepress 如果慢或者安装失败可以用cnpm替换,或者yarn # yarm yarn global add vuepress #cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #如果已安装请忽略 cnpm install -g vuepress 2、创建项目目录 mkdir vuepress-starter && cd vuepress-starter 3、新建一个 markdown 文件 echo '# Hello VuePress!' > README.md 运行项目 vuepress dev . 4、访问站点 http://localhost:8080/ 初始化项目 npm init -y 执行命令后,项目根目录会出现一个package.json,我们修改scripts节点 "scripts":{ "dev":"vuepress dev docs", "build":"vuepress build docs" } 修改之后: { "name":"vuepress-starter", "version":"1.0.0", "description":"", "main":"index.js", "scripts":{ "dev":"vuepress dev docs", "build":"vuepress build docs" }, "keywords":[ ], "author":"", "license":"ISC" } 创建基本目录

markdown vuepress Vue
阅读更多
浏览器保留页面跳转前的请求记录-持续记录
前端开发
2020-03-08 0k

浏览器保留页面跳转前的请求记录-持续记录

开发中往往会遇到这样的情况,调试一个请求,但是请求中有报错的跳转,结果一刷新页面就自动跳转了,也看不到请求报错,这个时候只要勾选上preserver log即可 谷歌: 火狐:

浏览器 开发者工具 网络调试
阅读更多
HTTP / HTTPS 必备基础知识
前端开发
2019-12-05 0k

HTTP / HTTPS 必备基础知识

HTTP 是一种 超文本传输协议(Hypertext Transfer Protocol)。 http是一个简单的请求-响应协议,它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应 。 一、地址栏输入网址(url)后发生了什么 1. DNS解析 首先浏览器通过DNS解析根据域名获取IP。通过下面的顺序获取。其中某个节点返回IP就不继续执行。 浏览器缓存 –> 系统host –> 本地域名服务器LDNS –> Root Server 域名服务器 2. 建立连接 浏览器根据得到的IP和目标服务器经过三次握手建立 TCP 连接。 3. 请求 建立连接后,浏览器会向目标服务器发起 HTTP-GET 请求,包括其中的 URL,HTTP 1.1 后默认使用长连接,只需要一次握手即可多次传输数据。 4. 响应 如果目标服务器只是一个简单的页面,就会直接返回,状态码为200。如果有重定向 ,返回 301,302 以 3 开头的重定向码,浏览器在获取了重定向响应后,在响应报文中 Location 项找到重定向地址,浏览器重新第一步访问即可。 5. 关闭连接 应答结束后,web浏览器与webserver四次握手断开连接,以保证其它web浏览器能够与webserver建立连接。 http1.1不是立即断开连接,而是服务端使用超时断开的策略来维护连接,一般是300s左右 二、无状态协议 HTTP无状态协议,是指协议对于事务处理没有记忆能力。每次的请求都是独立的,它的执行情况和结果与前面的请求和之后的请求是无直接关系的。不过,可以通过cookie、session等机制解决这个问题。 三、HTTP请求方法 根据 HTTP 标准,HTTP 请求可以使用多种请求方法。 HTTP1.0 定义了三种请求方法: GET, POST 和 HEAD方法。 HTTP1.1 新增了六种请求方法:OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。 方法 描述 GET 请求指定的页面信息,并返回实体主体。 POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。 PUT 从客户端向服务器传送的数据取代指定的文档的内容。 DELETE 请求服务器删除指定的页面。 HEAD 类似于 GET 请求,只不过返回的响应中没有具体的内容,用于获取报头 CONNECT 协议中预留给能够将连接改为管道方式的代理服务器。 OPTIONS 允许客户端查看服务器的性能。 TRACE 回显服务器收到的请求,主要用于测试或诊断。 PATCH 对 PUT 方法的补充,用来对已知资源进行局部更新 。 四、HTTP报文 在HTTP连接中报文分为请求(request)和响应(response)两种。每种报文在请求头都有不同的字段来标识不同的用途。

http https TCP
阅读更多
npm和cnpm的各种源以及切换管理工具nrm
前端开发
2019-09-15 0k

npm和cnpm的各种源以及切换管理工具nrm

npm 允许用户从NPM服务器下载第三方包到本地使用。 允许用户从NPM服务器下载并安装第三方命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 npm命令 npm -v 来测试是否成功安装 查看当前目录已安装插件:npm list 更新全部插件: npm update [ --save-dev ] 使用 npm 更新对应插件: npm update <name> [ -g ] [ --save-dev] 使用 npm 卸载插件: npm uninstall <name> [ -g ] [ --save-dev ] cnpm 淘宝团队做的国内镜像,因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 安装:命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v 来测试是否成功安装 通过改变地址来使用淘宝镜像 npm的默认地址是https://registry.npmjs.org/ npm config get registry查看npm的仓库地址 npm config set registry https://registry.npm.taobao.org改变默认下载地址,这样不安装cnpm就能采用淘宝镜像 nrm nrm能够管理所用可用的镜像源地址以及当前所使用的镜像源地址,但是只是单纯的提供了几个url并能够让我们在这几个地址之间方便切换

前端 npm cnpm
阅读更多
jqurey datatable  tableTools  自定义button元素 以及按钮定义事件
前端开发
2017-05-13 0k

jqurey datatable tableTools 自定义button元素 以及按钮定义事件

版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSwfPath": "~/Resources/Scripts/plugins/DataTables/swf/copy_csv_xls_pdf.swf" "sRowSelect": "multi", "aButtons": [ //{ "sExtends": "new_record", "sButtonText": "Add" }, { "sExtends": "select", "sButtonText": "Delete Recods", "fnClick": function (nButton, oConfig, oFlash) { //delete stuff comes here alert('test'); } } ] } 全部代码: @Styles.Render("~/bundles/css/datatable") @*<script src="~/Resources/Scripts/plugins/DataTables/js/dataTables.tableTools.js"></script> <link href="~/Resources/Scripts/plugins/DataTables/css/data-table.css" rel="stylesheet" />*@ <div> <ol class="breadcrumb pull-right"> @if (ViewBag.Breadcrumbs != null) { var dict = ViewBag.Breadcrumbs as Dictionary<string, string[]>; foreach (var dictItem in dict) { if (dictItem.

前端 jQuery DataTable
阅读更多