跨域与跨域访问

什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域

为什么浏览器要限制跨域访问呢?

原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题:

  1. 用户访问www.mybank.com ,登陆并进行网银操作,这时cookie啥的都生成并存放在浏览器
  2. 用户突然想起件事,并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
  3. 这时该网站就可以在它的页面中,拿到银行的cookie,比如用户名,登陆token等,然后发起对www.mybank.com 的操作
  4. 如果这时浏览器不予限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了。

为什么要跨域

既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域

跨域访问需要的两件宝贝

由于浏览器一般不对script,img等进行跨域限制,所以我们有机会通过script的方式来实现跨域访问。

跨域访问需要用到两样东东,一个是JSON,一种基于文本的传输协议;一种是JSONP,一群码农想出来的跨域解决方案。关于JSON与JSONP的解释,可以参考 JSON & JSONP

实现跨域访问 服务端需要做什么

服务端要检查访问的请求参数,如果没有callback,则可以按照之前的流程走;如果带着callback参数,则需要将返回的结果包装在callback里面。

比如请求的URL是: app.company.com/location?callback=myCallback , 那么服务端则需要把结果封装进myCallback 函数里面, 如下

if (params.query && params.query.callback) {//console.log(params.query.callback);var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonpres.end(str);} else {res.end(JSON.stringify(data));//普通的json}     

实现跨域访问 客户端需要做什么

客户端有多种方式可以实现JSONP的调用:

  • jQuery 
    jQuery可以在Ajax里面设置datatype为jsonp,则可以进行跨域访问
    $scope.jqueryJsonpRequest = function(){jQuery.ajax({type: "get",async: false,url: "https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts",dataType: "jsonp",jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据success: function(json){alert('success' + JSON.stringify(json));},error: function(){alert('fail');}});};
  • AngularJS 
    AngularJS的$http 也提供了对jsonp的访问,直接调用jsonp进行跨域访问
$http.jsonp('https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK').success(function(data){alert('success:'+data);}).error(function(err){alert('error:'+err);});
  • 手动实现 
    不管是jQuery也好,AngularJS也罢,底下都不是发起XHR (XML HTTP Request),而都是通过加载javascript的方式来做的,所以如果项目没有依赖jQuery或者AngularJS,则可以自己手动实现jsonp的调用。

    原理很简单,就是用javascript动态加载一个script文件,同时定义一个callback函数给script执行而已。

    //定义callback 函数
    var myCallbackFunction = function(data){// 对返回的数据做后续处理alert('uuu:'+JSON.stringify(data));}
    //把callback函数赋给window对象,供script回调   
    window.myCallbackFunction = myCallbackFunction;
    //创建并加载script
    var script = document.createElement('script');
    script.src = 'https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=myCallbackFunction';
    document.body.appendChild(script);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/451242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

thymeleaf 使用javascript定义数组报错

js中免不了的要用的数组,一维的二维的三维的 但是当用到thymeleaf作为模版时候会有一些坑,导致数组不能用 org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "{checkbox: true, fixed: true}, {field: origi…

解决:Failed to execute goal on project aopcore: Could not resolve dependencies for project com.cmos:

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 一、问题描述 maven工程 jar包无法下载,报错如下 : [ERROR] Failed to execute goal on project aopcore: Cou…

从Xbox和Zune中学到的四门创业课

导读:微软前娱乐与设备部门总裁Robbie Bach领导他的团队,实现了Xbox的畅销。然而,他领导该部门推出的Zune音乐播放器,却没那么成功。从Robbie这两个经历中,我们们能学到什么?本文是Robbie自己的总结&#x…

服务容错保护断路器Hystrix之七:做到自动降级

从《高可用服务设计之二:Rate limiting 限流与降级》中的“自动降级”中,我们这边将系统遇到“危险”时采取的整套应急方案和措施统一称为降级或服务降级。想要帮助服务做到自动降级,需要先做到如下几个步骤: 可配置的降级策略&am…

from表单提交和JSON区别

form表单是“键值对”的数据格式,例如: a1&b2&c3 而json格式则与之不同,如下: {"a":1,"b":2,"c":3} 传递的数据比较简单,那么两种方式基本上没什么大区别(当然后台接…

在一个数组中,如何确定所需元素在数组中的位置.

package wac.wev.LianXi; public class CiShu {public static void main(String[] args){//创建一个数组int[] arr {101,23,123,34,13};int y Yuan(arr,13);System.out.println(y);}//1)明确返回值:int//2)明确形式参数:int[] arr 和 int value(value表示所需元素)public stati…

Java实现Excel导入数据库,数据库中的数据导入到Excel

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 实现的功能: Java实现Excel导入数据库,如果存在就更新数据库中的数据导入到Excel1、添加jxl.jar mysql-connect…

FreeBSD 10 将使用 Clang 编译器替换 GCC

来自 phoronix 的消息称,根据 FreeBSD 2012 第一季度的状态报告 显示,来自 LLVM 的 Clang 编译器将成为 FreeBSD 10 的默认 C/C 编译器,废弃使用 GPL 授权协议的 GCC,而 Clang 的授权协议是 BSD。 Clang 是一个 C 编写、基于 L…

HashMap中数组初始化的秘密

2019独角兽企业重金招聘Python工程师标准>>> 我们知道,在新建一个HashMap对象时,无论传的initialCapacity参数值为多少,最总HashMap中数组的长度始终为2的n次方,代码如下: static final int tableSizeFor(i…

PLSQL 安装+配置( Oracle数据库连接工具 )

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1.找到免安装版本 PLSQL 解压到自己想放的位置 (比如 D:\ChengXu\PLSQL\PLSQL) 2.配置环境变量 : 系统变量…

什么是Nginx?为什么使用Nginx?

一、前言为毛要用nginx服务器代理,不直接用tomcat 7.0,还做多了一次接请求?这个是我想问的,公司的新项目是要用Nginxtomcat7jdk开发的,用户命名可以直接访问tomcat,为啥还要用Nginx?这货是个啥玩…

遵循五大设计理念 打造出色设计师

与其他设计不同,网页设计会随着时间的改变而不断改变着。因此,网页设计师需要不断的自我提升,了解最前沿的设计趋势以便能够设计出更加新颖的网站。 两年前,网页设计呈现出一片新的思维方式和新颖的设计趋势使得该领域彰显出一片…

shell符号

*: 通配符 *.c : c结尾的文件 *v : v结尾的文件 v* : v开头的文件转载于:https://www.cnblogs.com/runlgs/p/9685751.html

伪共享和缓存行填充,Java并发编程还能这么优化!

前言 关于伪共享的文章已经很多了,对于多线程编程来说,特别是多线程处理列表和数组的时候,要非常注意伪共享的问题。否则不仅无法发挥多线程的优势,还可能比单线程性能还差。随着JAVA版本的更新,再各个版本上减少伪共享…

mysql中like % %模糊查询

1,%:表示任意0个或多个字符。可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示。 比如 SELECT * FROM [user] WHERE u_name LIKE %三% 将会把u_name为“张三”,“张猫三…

Java中判断字符串是否为数字的五种方法

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 推荐使用第二个方法,速度最快。 方法一:用JAVA自带的函数 Java代码 public static boolean isNumeric(String…

慕学在线网0.4_xadmin后台管理

admin是基于Django开发的后台管理框架,方便,快捷,而且简单;   而xadmin就相当于admin的升级版,更加强大。    1、安装xadmin(源码安装方式)  教程 PS: - 卸载pip安装的xadminp…

从一次换机器的过程谈软硬件的分离

今天把在公司使用的计算机更换了一台,原来是Dell的780,换成了Dell的790,机箱的样子变化比较大,但是里面硬件的配置变换并不大,最明显的变化就在于CPU,其他像内存、硬盘等等的配置与原来的计算机基本上一致。…

知其所以然~redis的原子性

原子性 原子性是数据库的事务中的特性。在数据库事务的情景下,原子性指的是:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节。 对于Redis而言&#xf…

JoinPoint的用法

JoinPoint 对象 JoinPoint对象封装了SpringAop中切面方法的信息,在切面方法中添加JoinPoint参数,就可以获取到封装了该方法信息的JoinPoint对象. 常用api: 方法名功能Signature getSignature();获取封装了署名信息的对象,在该对象中可以获取到目标方法名,所属类的Class等信息…