文档章节

jsonp 跨域与 cors 跨域

lemos
 lemos
发布于 2017/03/25 22:20
字数 462
阅读 24
收藏 0

同源策略 Same Origin Policy

简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。

JSONP原理与实现
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp。

使用 ajax 请求获得 json数据

语法

jQuery.getJSON(url,data,success(data,status,xhr))

从 test.js载入 JSON 数据并显示 JSON 数据中一个 name 字段数据

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

还可以附加参数

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

这个函数是 ajax函数的简写,它等价于:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

重点:使用 jsonp 回调函数

<script type="text/javascript">     
    $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?", function(json){      
        alert(json[0].name);     
    });     
</script>  

cors 跨域 

需要请求的url 支持cors 跨域

之前的代码

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();
</script>

cors 跨域代码

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</script>

或者使用 ajax 进行 cors跨域

<script>
$(function () {
    $.ajax({
        type:'post',
        url:'http://localhost:8090/login',
        contentType:'text/plain',
        xhrFields:{
//            withCredentials:false
        },
        headers:{

        },
        success: function (data) {
//            alert(data);
            $('body').after(data);
        },
        error: function () {
            alert("error");
        }

    });
})
</script>

代码与之前的区别就在于相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址。

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。这一步,需要配置服务端支持 cors:参考 CORS支持

 

© 著作权归作者所有

上一篇: springboot - actuator
下一篇: jquery 中常见函数
lemos
粉丝 9
博文 199
码字总数 95671
作品 0
芜湖
后端工程师
私信 提问
跨域解决之JSONP和CORS的详细介绍

JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名、协议、端口均相同。 浏览器执...

kaixin_code
2018/11/26
52
0
javascript 跨域的几种情况

JavaScript 中的跨域问题 http://yijiebuyi.com/A.js http://yijiebuyi.com/B.js 上面情况在同一域名下,不同资源文件 [允许跨域] http://yijiebuyi.com/blog/A.js http://yijiebuyi.com/job......

一介布衣
2016/09/08
0
0
前端筑基篇(一)->ajax跨域原理以及解决方案

说明 本文内容较老,而且已经不再更新,最新更新请移步 http://www.jianshu.com/p/82b82d5dd1ea 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 ...

撒网要见鱼
2016/09/21
0
0
浅谈跨域以及WebService对跨域的支持

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。 在以前...

冬瓜1
2016/01/21
44
0
Web APi之手动实现JSONP或安装配置Cors跨域(七)

前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器、Action方法,以及过滤器、模型绑定等等,想想也是心...

jeffcky
2015/09/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
211
9
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
2
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部