当前位置:网站首页>Cross domain and jsonp details
Cross domain and jsonp details
2022-07-06 04:07:00 【Concision.】
Cross domain and JSONP Detailed explanation
1. Homology
- If two pages agreement , Domain name and port All the same , The two pages have the same source .
for example , The following table shows the relativehttp://www.test.com/index.html
Page homology detection :
2. The same-origin policy
The same-origin policy ( English full name Same origin policy
) It's a browser Safety features . The same-origin policy Limit from The same source How the loaded document or script relates to the one from Another source Interact with other resources . This is an important security mechanism for isolating potentially malicious files .
3. Cross domain
- Homology refers to two URL The agreement 、 domain name 、 Port consistency , conversely , It's cross domain .
The root cause of cross domain
: The same source strategy for browsers Don't allow Not homologous URL Interact with resources .
Browser interception of cross domain requests
How to implement cross domain data requests
- Implement cross domain data requests , The two main solutions :
JSONP
andCORS
.
JSONP
: It's early , Compatibility is good. ( Compatible with lower versions IE). It's the front-end programmer to solve cross domain problems , Forced to come up with a temporary solution . The disadvantage is that it only supports GET request , I won't support it POST request .CORS
: Late appearance , It is W3C standard , Cross domain Ajax The underlying solution to the request . Support GET and POST request . The disadvantage is that it is not compatible with some lower versions of browsers .
JSONP
JSONP
(JSON with Padding) yes JSON A kind of “ Usage mode ”, can Used to solve the problem of cross domain data access of mainstream browsers .- Due to the restriction of browser homology strategy , Can't pass... In the web page Ajax Request non homologous interface data . however
<script>
label Not affected by browser homology policy , Can passsrc
attribute , Request non homologous js Script . Realization principle
: It's through<script>
Labeledsrc
attribute , Request a cross domain data interface , And in the form of function calls , Receive the data returned from the cross domain interface response . For detailed use, please refer to The blog
<body>
<script>
function abc(data) {
console.log('JSONP The data returned in response is :')
console.log(data)
}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
</body>
</html>
- JSONP The shortcomings of
because JSONP It's through
<script>
Labeled src attribute , To achieve cross domain data acquisition , therefore JSONP Only support GET Data request , I won't support it POST request .JSONP and Ajax There is no relationship between , Can't take JSONP The way to request data is called Ajax, because JSONP Not used XMLHttpRequest This object .
jQuery Medium JSONP
jQuery Provided $.ajax()
function , In addition to initiating real Ajax In addition to data requests , Can also initiate JSONP Data request , for example :
$.ajax({
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
// If you want to use $.ajax() launch JSONP request , Must specify datatype by jsonp
dataType: 'jsonp',
success: function(res) {
console.log(res)
}
})
Be careful
: By default , Use jQuery launch JSONP request , Will automatically carry a callback=jQueryxxx Parameters of ,jQueryxxx Is the name of a randomly generated callback function . If you want to customize JSONP The parameters of the callback function and the name of the callback function , You can specify... With the following two parameters :
$.ajax({
url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
dataType: 'jsonp',
// Parameter name sent to the server , The default value is callback
jsonp: 'callback',
// Custom callback function name , The default value is jQueryxxx Format
jsonpCallback: 'abc',
success: function(res) {
console.log(res)
}
})
Implementation process
边栏推荐
- Conditionally [jsonignore]
- 自动化测试怎么规范部署?
- Web components series (VII) -- life cycle of custom components
- 2/13 qaq~~ greed + binary prefix sum + number theory (find the greatest common factor of multiple numbers)
- Ipv4中的A 、B、C类网络及子网掩码
- DM8 backup set deletion
- 记一次excel XXE漏洞
- C#(三十一)之自定义事件
- MySQL about self growth
- Global and Chinese markets for medical gas manifolds 2022-2028: Research Report on technology, participants, trends, market size and share
猜你喜欢
记一次excel XXE漏洞
[adjustable delay network] development of FPGA based adjustable delay network system Verilog
MySQL about self growth
10 exemples les plus courants de gestion du trafic istio, que savez - vous?
Viewing and verifying backup sets using dmrman
lora网关以太网传输
Le compte racine de la base de données MySQL ne peut pas se connecter à distance à la solution
How many of the 10 most common examples of istio traffic management do you know?
About some basic DP -- those things about coins (the basic introduction of DP)
10个 Istio 流量管理 最常用的例子,你知道几个?
随机推荐
STC8H开发(十二): I2C驱动AT24C08,AT24C32系列EEPROM存储
Conditionally [jsonignore]
WPF effect Article 191 box selection listbox
MySql数据库root账户无法远程登陆解决办法
Simple blog system
Mathematical modeling regression analysis relationship between variables
KS008基于SSM的新闻发布系统
JVM的手术刀式剖析——一文带你窥探JVM的秘密
C language -- structs, unions, enumerations, and custom types
[introduction to Django] 11 web page associated MySQL single field table (add, modify, delete)
Class A, B, C networks and subnet masks in IPv4
Unity中几个重要类
10 exemples les plus courants de gestion du trafic istio, que savez - vous?
Oracle ORA error message
【leetcode】1189. Maximum number of "balloons"
Custom event of C (31)
Viewing and verifying backup sets using dmrman
WPF效果第一百九十一篇之框选ListBox
C#(二十九)之C#listBox checkedlistbox imagelist
[PSO] Based on PSO particle swarm optimization, matlab simulation of the calculation of the lowest transportation cost of goods at material points, including transportation costs, agent conversion cos