Main
Main
文章目录
  1. 1.”源”
  2. 2.”同源策略”
  3. 3.jQuery的JSONP请求
    1. 3.1JSONP的客户端实现
    2. 3.2JSONP服务端(dotnet core)

JSONP跨域

1.”源”

源是指协议、域名和端口号

2.”同源策略”

同源策略是浏览器的一个安全功能,当前域的内容不能访问其他域的内容

URL 是否同源 说明
http://www.bustlingv.comhttps://www.bustlingv.com 不同源 协议不同
http://www.bustlingv.comhttp://www.bustlingvs.com 不同源 域名不同
http://www.bustlingv.com:1080http://www.bustlingv.com:1081 不同源 端口号不同
http://www.bustlingv.com/index.htmlhttp://www.bustlingv.com/a.js 同源 协议、域名和端口号相同

3.jQuery的JSONP请求

JSONP是一种[请求一段 JS 脚本,把执行这段脚本的结果当做数据]的做法,所以只能get请求。
[凡是拥有src属性的标签都有跨域能力]

3.1JSONP的客户端实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$(function(){
$.ajax({
url:'http://localhost:5000/api/values/getalljsonp?callback=?',
type:'get',
datatype:'jsonp',
success:function(msg){
console.log(msg);
}

});

//简写
$.getJSON('http://localhost:5000/api/values/getalljsonp?callback=?', function(msg){
console.log(msg)
});
});

//callback=? jquery会自动生成一个随机函数,可以自定义名称。
</script>
<body>
</html>
3.2JSONP服务端(dotnet core)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
using Newtonsoft.Json;
using System;
...

namespace WebApiTest
{
[Route("api/[controller]/[Action]")]
public class ValuesController : ApiController
{

[HttpGet]
public string GetAllJsonP(string callback)
{
List<TestModel> list = new List<TestModel>();
for(int i=0; i < 10; i++)
{
TestModel model = new TestModel()
{
Id = i,
Name = $"测试{i}"
};
list.Add(model);
}

var json = JsonConvert.SerializeObject(list);
json = $"{callback}({json})";
return json;
}
}

public class TestModel
{
public int Id { get; set;}
public string Name { get; set;}
}
}
支持一下
  • 微信扫一扫
  • 支付宝扫一扫