您的位置：首页 > Web前端 > JavaScript

Jsonp 跨域and 跨域资源共享 CORS 详解

2017-04-11 15:03 671 查看

1、首先要了解什么是域？

2、为什么要跨域，跨域能解决什么问题？

3、jsonp

4、jsonp支持POST请求吗？不支持，只支持GET请求，除非其他办法，未知

5、jQuery对jsonp的支持

6、ajax 和jsonp 不是一码事细读详解http://blog.csdn.net/superhosts/article/details/9057301

[b]1、首先要了解什么是域？
[/b]

什么是域，简单来说就是协议+域名或地址+端口，3者只要有任何一个不同就表示不在同一个域。跨域，就是在一个域中访问另一个域的数据。

如果只是加载另一个域的内容，而不需要访问其中的数据的话，跨域是很简单的，比如使用iframe。但如果需要从另一个域加载并使用这些数据的话，就会比较麻烦。为了安全性，浏览器对这种情况有着严格的限制，需要在客户端和服务端同时做一些设置才能实现跨域请求。

JSONP简介
JSONP（JSON with Padding）是一种常用的跨域手段，但只支持JS脚本和JSON格式的数据。顾名思义，JSONP是利用JSON作为垫片，从而实现跨域请求的一种技术手段。其基本原理是利用HTML的<script>标签天生可以跨域这一特点，用其加载另一个域的JSON数据，加载完成后会自动运行一个回调函数通知调用者。此过程需要另一个域的服务端支持，所以这种方式实现的跨域并不是任意的。

5.jQuery对jsonp的支持

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

b486
<script src="resources/fore/plugin/jquery.js" type="text/javascript"></script>

<script type="text/javascript" src="sha1.js">

</script>

<style type="text/css">

.theme-entry-link .border {

display: inline-block;

-webkit-transition: all 0.25s ease-in-out;

-moz-transition: all 0.25s ease-in-out;

transition: all 0.25s ease-in-out;

display: block;

width: 0;

height: 4px;

background: transparent;

}

.theme-entry-link:hover .border {

width: 100px;

background: #0000EE;

}

</style>

</head>

<body>

<input type="text" value="" id="test" width="200px" height="50px">

<input type="button" onclick="test()" value="试试">

<div class="theme-entry site-id-16 count-1">

<a href="https://wpexplorer-themes.com/status/" title="Status WordPress Theme" class="theme-entry-link" target="_blank">

<img src="https://wpexplorer-themes.com/status/wp-content/uploads/sites/16/2016/07/status-1.png" alt="Status WordPress Theme">

<h2>Status<span class="border"></span></h2>

</a>

<p>High Quality Magazine WordPress Theme</p>

</div>

<script>

var sha = hex_sha1('mima');

console.log(sha);

function test() {

$.ajax({

url:"http://www.zmpanda.com/api.php?a=product",

type:'get',
dataType : 'jsonp',
jsonp:"jsoncallback",
data:{"type":1,"token":sha},

success:function (respons) {

console.log(respons)

console.log(respons.data[0]);

},

error:function (res) {

alert(2);

}

})

}

</script>

</body>

</html>

跨源资源共享(CORS)是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等)，来限制哪些域的请求和哪些请求类型可以接受，而客户端在发起请求时必须声明自己的源(Orgin)，否则服务器将不予处理，如果客户端不作声明，请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较，只有同域的请求才会处理。

客户端：

function getHello() {
var xhr = new XMLHttpRequest();
xhr.open("post", "http://b.example.com/Test.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　　　
// 声明请求源
xhr.setRequestHeader("Origin", "http://a.example.com");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
console.info(responseText);
}
}
xhr.send();
}

服务端：

public class Test : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 声明接受所有域的请求
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write("Hello World");
}

public bool IsReusable
{
get
{
return false;
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航