current position:Home>Advanced tutorial 11. Homology strategy / cross domain
Advanced tutorial 11. Homology strategy / cross domain
2021-08-27 09:42:32 【Heyong】
This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details :8 Yuegengwen challenge
One 、 The same-origin policy
1.1 What is homology strategy ?
The same-origin policy (Same-origin Policy): In order to ensure the information security of the browser , The browser uses the same origin strategy , Ensure that the resources in the current source can only be used in the current source ; If other sources need to use the current source resource , Need special technology , such A Source access B The communication of source resources is called cross domain communication ;
1.2 Example :
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com/', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('xxx')
}
};
xhr.send();
Copy code
- The above request will report an error :
Access to XMLHttpRequest at 'https://www.baidu.com/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Copy code
When the above error occurs, it indicates that you are conducting a cross domain operation ;
1.3 Requirements of homology strategy :
The homology strategy requires the protocol of two sources of communication 、 domain name 、 The port number should be the same , If any of the three is different, it does not meet the homology strategy ; Communication that does not satisfy the same origin policy is cross domain ;
1.4 Common cross domain solutions :
- JSONP
- Server forwarding , Because the same origin policy exists only on the client , It doesn't exist on the server ; So the server can forward the request ;
- nginx forward ,nginx It's a server application , It can accept requests from clients , Automatic forwarding can then be configured according to the rules ;
- CORS: Cross-Origin-Resource-Sharing: Target domain settings are required Access-Control-Allow-Origin Header information ;
Two 、JSONP
JSONP It is a common way to solve cross domain problems ;
2.1 principle :
utilize script Of src Attributes are not constrained by the same source policy , You can access data under different servers or port numbers
- Declare in advance that one is called fn Function of , to fn Set a formal parameter ;
- Give... On the page script Of src The path pointing to splices a callback attribute ,callback=fn; When the browser resolves to this script When labeling , Will send to src The path pointed to http request ;
- When the server receives the request , Will return a fn( Here is the data returned by the server )
- fn({xxx}) This is let fn perform , Inside the parentheses are the data sent to us by the server
2.2 Example :
JS Code :
function fn(data) {
console.log(data);
}
Copy code
HTML Code
<script src="http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&callback=fn"></script>
Copy code
3、 ... and 、CORS
3.1 Definition
CORS: CORS It's a W3C standard , The full name is " Cross-domain resource sharing "(Cross-origin resource sharing). It allows the browser to cross to the source server , issue XMLHttpRequest request , To overcome AJAX It can only be used in the same source .
Use CORS To solve cross domain problems , By agreement HTTP The response header information informs the client of the current cross domain permission , The following header information is common :
Access-Control-Allow-Headers
Allowed request headers ,*
Express arbitrarily ;Access-Control-Allow-Methods
Methods used in cross domain access , Common methodsGET,PUT,POST,DELETE,OPTIONS
;Access-Control-Allow-Max-Age
Set a cache period for cross domain configuration information , such as10s
, identification 10s Don't send it again OPTIONS Request to inquire about cross domain configuration ;Access-Control-Allow-Credentials
, Set whether to allow carryingcookie
,true
Is it allowed to carrycookie
Come on , If you don't set this value , The target source cannot set the client'scookie
3.2 An example
Here is one Nodejs Easy to develop server Code :
const http = require('http');
const fs = require('fs');
const path = require('path')
const url = require('url');
http.createServer((req, res) => {
let { pathname, query } = url.parse(req.url, true)
let method = req.method.toUpperCase()
res.setHeader('Access-Control-Allow-Headers', 'token');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.setHeader('Access-Control-Allow-Max-Age', '10');
res.setHeader('Access-Control-Allow-Credentials', true);
// res.setHeader()
if (method === 'OPTIONS') {
return res.end();
}
if (pathname === '/user') {
switch (method) {
case 'GET':
res.end(JSON.stringify({ name: 'ok' }))
break
case 'POST':
let arr = []
req.on('data', chunk => arr.push(chunk))
req.on('end', () => {
let r = Buffer.concat(arr).toString()
res.setHeader('Set-Cookie', 'a=333333')
res.end(JSON.stringify({b: 'post'}))
})
}
return
}
let filepath = path.join(__dirname, pathname)
fs.stat(filepath, (err, statObj) => {
if (err) {
res.statusCode = 404;
return res.end('not found')
}
if (statObj.isFile()) {
return fs.createReadStream(filepath).pipe(res)
}
res.statusCode = 404;
res.end('not found')
})
}).listen(8081, () => {
console.log('ok 8081')
})
Copy code
3.3 matters needing attention
3.3.1 form Forms
form There is no cross domain problem in the submission of forms ,form The submission of can be submitted to any source ;
<form action="http://www.unkown.com/some/path/app.php" method="get">
<p>First name: <input type="text" name="f_name" /></p>
<p>Last name: <input type="text" name="l_name" /></p>
<input type="submit" value="Submit" />
</form>
Copy code
3.3.2 Complex requests and OPTIONS
When the browser recognizes that this is a cross domain behavior , If the request is a complex request, a OPTIONS
request , Ask the server whether cross domain and other related configurations are allowed ;
GET/POST It's all simple requests , If the request contains a custom request header, it will become a complex request , At this time, the browser automatically sends OPTIONS
request , And then get the correct CORS Only after the response will the real request be initiated . If the server OPTIONS The request did not return , Or the return is incorrect , It will not reply to sending the real request and throw the error of homology policy restriction ;
Copy code
copyright notice
author[Heyong],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827094227989C.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich