跨域与跨域访问_如何实现跨域访问

跨域与跨域访问_如何实现跨域访问什么是跨域跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com页面去请求www.google.com的资源。跨域的严格一点的定义是:只要协议,域名,端口有任何一个的不同,就被当作是跨域为什么浏览器要限制跨域访问呢?原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如从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) + ')';//jsonp
    res.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);
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187048.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 数组元素的下标超出所定义的_数组元素的下标超出所定义的

    数组元素的下标超出所定义的_数组元素的下标超出所定义的问题错误信息:数组成员引用下标超出定义范围原因使用数组成员的时候,下标超出了数组最大个数。解决方法仅用于自己编写程序,所以如果是别人做好的程序,运行出现错误,你又没代码的话那就没用了。解决思路就是正确使用数组下标,不要超过数组最大成员数。下面是两种笨方法:方法一在使用数组成员的时候,检查数组的最大成员数。例如:如果真(取数组成员数(数组名)>0)确定数组有成员,之后再引用。方法二菜单的工具-系统配置-编译,勾选“是否启用快速数组访问方式”。(调试时仍然会

    2022年10月19日
  • ActivityManager_activity管理器

    ActivityManager_activity管理器ActivityManager在操作系统中有重要的作用,本文利用操作系统源码,逐步理清ActivityManager的框架,并从静态类结构图和动态序列图两个角度分别进行剖析,从而帮助开发人员加强对系统框架及进程通信机制的理解。ActivityManager的作用参照SDK的说明,可见ActivityManager的功能是与系统中所有运行着的Activity交互提供了接口,主要的接口围绕着运

  • navicat 15永久激活工具破解方法

    navicat 15永久激活工具破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • rabbitmqkafka对比_全场景

    rabbitmqkafka对比_全场景这是陈东景于2021年8月29日下午16点原创作品,转载请标明出处!!!!在进行软件设计的过程中,如果软件设计业务上存在需要短时间内处理大批量的信息,又需要能保证软件能正常运行(保证软件的高可靠和高可用)。因为大批量(几十万,几百万级别的数据或者消息需要同一个时间处理),软件的IO过高,会导致软件运行阻塞或者消耗内存过高而崩溃,甚至是宕机。消息队列的概念被提了出来,通过缓存消息的模式,进行生产和消费。通过异步处理的方式,解耦这种短时间内出现大批量需要处理消息的场景。目前我们使用到的比…

    2022年10月14日
  • gcc命令使用_c调用cmd并执行命令

    gcc命令使用_c调用cmd并执行命令gcc命令基本操作Hello基本操作编译汇编链接ELF文件分析Hello基本操作准备工作#include<stdio.h>//此程序很简单,仅仅打印一个HelloWorld的字符串。intmain(void){printf(“HelloWorld!\n”);return0;}hello.i文件编译汇编将编译生成的hello.s文件汇编生成目标文件hello.oGCC的选项-c使GCC在执行完汇编后停止,生成目标文件

    2022年10月13日
  • 一个高效快捷的排序方法

    一个高效快捷的排序方法

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号