current position:Home>Why can't XMLHttpRequest request resources across domains
Why can't XMLHttpRequest request resources across domains
2021-08-26 00:41:41 【Mushroom with pepper】
This article has participated in the third phase of nuggets creators training camp 「 Topic writing 」 Track , View details : Project digging | The third phase of the creator training camp is under way ,「 Write 」 Personal influence .
This article intends to revisit the issue of cross domain . This article will add its own understanding , For friends who know very well , You can skip .
XMLHTTPRequest
XHR It's his short name , Its role is to interact with the server . adopt HXR Through a specific... Without refreshing the page URL Get data from the server .AJAX It is widely used in many fields .
Simply encapsulate a AJAX
// Only consider for the time being get request , Don't consider IE Compatibility
const data = {
url: "/",
type: "get",
async: true,
params: {
username: "sun",
age: 18
},
success: (res) => {
console.log(res)
},
error: (res) => {
console.log(res)
}
};
function ajax(data) {
const key = Object.keys(data.params);
let params = [];
for (let i = 0; i < key.length; i++) {
params[i] = key[i] + "=" + data.params[key[i]];
}
// username=sun&age=18
const string = params.join("&");
const url = data.url + "?" + string;
const xhr = new XMLHttpRequest();
// allow Cookie Pass on
xhr.withCredenttials = true
xhr.open(data.type, url, data.async);
xhr.send();
// If the connection to the server is successful, execute this function immediately
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
data.success(this.response);
} else {
data.error(this.responseXML);
}
}
}
ajax(data);
Copy code
It's on it AJAX Yes XHR Simple application of ,open() Will open the association with the server ,send() Will wait for onreadystatechange() After the function is completely completed, execute close . When readyState When things change onreadystatechange() Function will be called .
readyState There are five values :
- 0: The agent is created , But it didn't call open() Method
- 1:open() Method is called
- 2:send() Method is called
- 3: In the download ,responseText Property contains some data
- 4: Download operation completed
In the use of XMLHTTPRequest perhaps img When labeling , Will be constrained by the same origin policy . Next, let's look at the homology strategy .
The same-origin policy And XMLHTTPRequest
Homology policy is one of the browser security policies , Used to limit a source (origin) A new document or loaded script interacts with another source .
Homology And Different sources ( Cross domain )
Homology refers to the agreement between the requesting party and the requested party 、 domain name 、 When the three ports are consistent , We call it homology .
The domain name here is the domain name , No IP. Domain name is different , Indicates that the host is different . Different ports , Indicates that the requested service is different .
If different sources , We call it cross domain , Next, let's introduce how to conduct cross source access , That is often referred to as cross domain .
Cross source network access
In the use of XMLHTTPRequest perhaps img When labeling , Will be constrained by the same origin policy .
These interactions are usually divided into three categories :
- Cross domain writes are usually allowed . for example link link 、 Redirection and form submission . A specific minority HTTP The request needs to add preflight
- Cross domain resource embedding is generally allowed .
- Cross domain read operations are generally not allowed , However, it is usually possible to skillfully read and access through embedded resources .
Here are some examples of resources that may be embedded across sources :
<script src="..."></script>
Tags are embedded in cross domain scripts . Syntax error messages can only be caught in cognate scripts .<link rel="stylesheet" href="...">
The embedded CSS.- adopt img Label display picture .
- adopt video and audio Play media resources .
- adopt
<object>
Embedded plug-ins . - adopt @font-face Introduce Fonts .
- adopt
<iframe>
Load any resources .
In addition to the above , Is there any other way to allow cross domain access ?
CORS
CORS( Cross source resource sharing ) It's based on HTTP The mechanism of head . This mechanism allows the server to identify other than itself origin( Domain , Protocol and port ) You can access and load these resources , So the browser can access and load these resources .
CORS It requires both browser and server support . The server needs to configure the request header information , And the browser found AJAX request (XMLHTTPRequest) Across the source , Some additional header information will be automatically added .
therefore , Realization CORS The key to communication is the server , As long as the server implements it CORS Interface , You can cross source .
The browser will CORS Requests fall into two categories : Simple requests and complex requests .
A simple request
Simple requests do not trigger CORS Pre inspection request . Here is a simple request :
-
Use one of the following methods :
- GET
- HEAD
- POST
-
The fields set by the user will not exceed the following :
- Accept
- Accept-Language
- Content-Language
- Content-type: Limited to three ,text/plan、multipart/form-data、application/x-www-form-urlencoded
The above is for compatibility with forms form, Because historically, forms can always be requested across domains . therefore AJAX The design is as long as the form can be sent ,AJAX You can send .
Simple request basic process The browser will add a field in the header of the simple request Origin, To explain which source this request comes from .
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
Copy code
Server according to Origin Field to determine whether the request can be made , If Origin The specified source is not within the allowed range of the server , The server will return a normal message to the browser HTTP Respond . Instead of including Access-Control-Allow-Origin Field response .
The browser found that the information in the response header does not contain Access-Control-Allow-Origin Field , I knew it was wrong , Will be HMLHttpRequest Of onerror Callback function capture .
If Origin The specified source is within the allowable range , The server will add several information in the response header :
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
Copy code
The meaning of this information :
-
Access-Control-Allow-Origin
- This field must exist , Indicates which... Is allowed origin Cross source request , It can be *, To allow all .
-
Access-Control-Allow-Credentials
- Non required fields , A Boolean value .true: At present CORS Whether... Is allowed in this request Cookie. The default is false.
-
Access-Control-Expose-Headers
- Non required fields , Specify that HMLHttpRequest Object's getResponseHeader() Method to get which fields . If there is no default, the following fields can be obtained :Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma.
About whether to allow passing Cookie It's not just the server that will Access-Control-Allow-Credentials Set to true, Need to be in AJAX Open in withCredentials
attribute . Otherwise the browser will not send Cookie.
Be careful : If you need to send Cookie, that Access-Control-Allow-Origin The field cannot be set to *, And in the original web page code document.cookie Also unable to read the server under the domain name Cookie
It's not a simple request
Non simple requests are requests that have special requirements for the server , such as : The request method is PUT or DELETE, or Content-Type The type of field is application/json
It's not a simple request CORS, Will be before formal correspondence , Add a HTTP Query request , be called ‘ preview ’ request (preflight).
The browser will first ask the server , Whether the domain name of the current web page is in the server license list , And what can be used HTTP Verb and header fields . The browser will not issue... Until it is confirmed XMLHttpRequest request , Otherwise, it will be wrong .
For example, the following request :
var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
Copy code
The request method is PUT, The head joined X-Custom-Header Information , The browser found that this is a non simple request , A pre inspection request will be initiated , Ask the server to confirm whether it can request .
Pre check request header information :
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
Copy code
The method of pre inspection request is OPTIONS, Indicates that the request is for inquiry . except Origin Field , The information of the pre check request header contains two special fields :
-
Access-Control-Request-Method
- List browsers CORS What will be used in the request HTTP Method , Like the one above PUT
-
Access-Control-Request-Headers
- Is a comma separated string , Indicates the header information field for additional transmission .
Response to a pre inspection request : When the pre inspection request is completed , You can respond .
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
Copy code
The fields in the response Access-Control-Allow-Origin Indicates that the current source can request data , Other responses from the server about CORS Relevant fields of :
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
Copy code
-
Access-Control-Allow-Methods
- Required fields , Values are comma separated strings , Represents the cross source request method supported by the server . The purpose is to avoid multiple pre inspection requests .
-
Access-Control-Allow-Headers
- If the browser request header contains Access-Control-Request-Headers Field , This field is necessary for the server . Values are comma separated strings , Represents all header information fields supported by the server , Not limited to the fields requested by the browser in the pre check .
-
Access-Control-Allow-Credentials
- This field has the same meaning as when requesting , And Cookie of .
-
Access-Control-Max-Age
- Non required fields . Indicates the validity period of the pre inspection request , The unit is in seconds . namely , How many seconds are allowed to cache this response , There is no need to send a pre inspection request within the validity period .
After the pre check request , The browser works normally CORS Request header :
PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
Copy code
The response from the server is :
Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8
Copy code
Field Access-Control-Allow-Origin It must be carried with each response .
summary
This article mainly explains as follows :
- XMLHttpRequest yes AJAX The root of request encapsulation .
- AJAX Some requests cannot cross domain because of the same origin policy , This strategy is browser's .
- Solve the problem of cross domain requests except for some tags , also CORS.
- CORS Principle , And job details .
copyright notice
author[Mushroom with pepper],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826004135497n.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