前端 文章

从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 跨域
阅读更多
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
阅读更多
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
阅读更多
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
阅读更多
HTTP协议状态码详解 HTTP Status Code
前端
2017-03-11 0k

HTTP协议状态码详解 HTTP Status Code

当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。 HTTP状态码的英文为HTTP Status Code。 下面是常见的HTTP状态码: 200 :请求成功。 400 :请求有语法错误。 401 :未授权。 301 :永久转移。 302 :临时转移。 403 :拒绝服务,可能是没有权限等等。 404 :资源没找到。 500 :服务器内部错误。 503 :服务不可用。 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码。 100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。 101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。 2xx (成功) 表示成功处理了请求的状态代码。 200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。 201 (已创建) 请求成功并且服务器创建了新的资源。 202 (已接受) 服务器已接受请求,但尚未处理。 203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。 204 (无内容) 服务器成功处理了请求,但没有返回任何内容。 205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。 206 (部分内容) 服务器成功处理了部分 GET 请求。 3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

http HTTP状态码 网络协议
阅读更多