【taotao】JS跨域

2024-08-25 18:48
文章标签 js 跨域 taotao

本文主要是介绍【taotao】JS跨域,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【跨域概述】
	在JS中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JS代码
能够访问的页面内容做了很重要的限制,即JS只能访问与包含它的文档在同一域下的内容。因此,也产生了跨域的概
念。
【什么是跨域】
	JS为了安全,有一个限制,不允许跨域访问。
	1. 两个url的域名不同
	2. url相同,域名不同或端口不同
	3. ip不同
	以上三种情况,都属于跨域。
【跨域场景】
	1. 场景描述
	两个工程:
		服务层:taotao-rest:没有表现层,只有业务逻辑。需要发布服务。部署在8081端口
		表现层:taotao-portal:只有表现层,没有业务逻辑,不需要连接数据库。部署在8082端口
	表现层和服务层通信,使用Webservice进行通信。Restful形式的Webservice。http+json数据。
	2. 场景再现
	现需要展示所有商品类目信息,以静态的json数据为例,若该数据在portal项目中,js代码如下:
			
	//访问地址
	URL_Serv: "http://localhost:8082/category.json"
	商品类目展示是没有问题的,
		
	而如果将该json数据放在rest项目中,再通过修改URL_Serv的地址:
		http://localhost:8081/category.json
	这样便不能正常显示数据了,浏览器错误如下:
  
	这就产生了本篇博客要说的跨域问题。下面来看,我们应该如何解决跨域问题。
【解决方案】
	jsonp
	首先我们需要明确,在js中不能跨域请求数据,js可以跨域请求js片段。所以,我们可以将数据包装成js片
段,形成一条方法的调用语句,继续使用ajax请求js片段,得到响应后,在浏览器端的回调方法中通过参数获得请求
的数据。过程如下:
     
	这样我们可以将以上的代码修改为:
		
	//访问地址,URL_Serv:
		
	再访问首页商品类目:
		
【JSONP的产生】
	1. 首先我们应该知道,在web页面上调用js文件则不受是否跨域的影响,而且拥有src属性的标签,如
<script>/<img>/<iframe>,都拥有跨域的能力;
	2. 所以,要是想通过纯web端跨域访问数据只有一种可能,那就是设法把数据装进js文件里,供客户端调用
和进一步的处理;
	3. 恰巧JSON数据格式可以简单地描述复杂数据,而且被JSON支持,所以在客户端便可以任意处理此格式的
数据;
	4. 因此,解决方案就出现了:web端通过调用与脚本一样的方式,去调用跨域服务器上动态生成的js文件
(一般以JSON为后缀)
	5. 客户端在对JSON文件调用成功之后,便获取到了自己所需要的数据,剩下的便可以按照自己的需求去展
示了。
	6. 为了便于客户端使用数据,逐渐形成了一种非正式传输协议,便是JSONP。
【关于JSONP的几个问题】
	1. jsonp跨域只能是get请求,而不能是post请求?
	2. jsonp跨域的原理到底是什么?
	3. 除了jsonp跨域之外还有那些方法绕过“同源策略”,实现跨域访问?
	4. jsonp和ajax,或者说jsonp和XMLHttpRequest是什么关系?
    下面就从jsonp跨域原理说起。
	1、JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。
	2、由第1点,这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。在没有ajax技术之前,
script标签就存在了的。是因为JQuery的封装,使用了ajax来向服务器传递jsonp和jsonpCallback两个参数。
	3、script,link,img等等标签引入外部资源,都是get请求,那么就决定了jsonp一定是get。但其实上在
代码中写post请求也能成功。这是因为当我们指定dataType:'jsonp',不论指定type:'post'或type:'get',其实质
上都是get请求。
    对应的jquery源码如下:

// Handle cache's special case and global
jQuery.ajaxPrefilter( "script", function( s ) {if ( s.cache === undefined ) {s.cache = false;}if ( s.crossDomain ) {s.type = "GET";s.global = false;}
});

	在ajax的过滤函数中,只要是跨域,jQuery就将其type设置成"GET".

	4、其实除了jsonp跨域之外,还有其它方法绕过同源策略。因为同源是针对客户端的,在服务器端是可以随
便访问的。所以我们可以通过客户端先访问同源的服务端代码,该同源的服务端代码,使用httpClient等方法,再去
访问不同源的服务端代码,然后将结果返回给客户端,这样就实现了跨域。
	5、参数jsonp和jsonCallback
	jsonp指定使用哪个名字将回调函数传给服务端,也就是在服务端通过request.getParameter("")获得的名
字,而jsonpCallback是对应的值,也就是回调函数的名称。其实这两个参数都可以不指定,只要我们是通过
success,来指定回调函数的情况下,默认就是“callback”。JQuery对应源码如下:

var oldCallbacks = [],rjsonp = /(=)\?(?=&|$)|\?\?/;// Default jsonp settings
jQuery.ajaxSetup({jsonp: "callback",jsonpCallback: function() {var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( nonce++ ) );this[ callback ] = true;return callback;}
});

【总结】

	跨域,经常会遇到的问题。之前的学习还没有到此阶段,所以总是选择避免这样的问题。而现在,学习积累
到了一定阶段,就有了第一次的接触,学习到了其中的一种解决方案jsonp。从遇到的问题出发,到给出解决方案,
这一过程的学习很充实。并且,解决的方案并不仅仅有jsonp哦。


这篇关于【taotao】JS跨域的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1106361

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

proxy代理解决vue中跨域问题

vue.config.js module.exports = {...// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: port,open: true,proxy: {'/api': {target: `https://vfadmin.insistence.tech/prod-api`,changeOrigin: true,p