Cross Origin Resource Sharing (CORS) Access-Control-Allow-Origin

1. The browser's same-origin security policy

That's right, this guy did it. The browser only allows requests for resources in the current domain, and expresses distrust for resources in other domains. So how is it considered cross-domain?

http,httpsThe difference in the request protocol
domain domaindifference
port portdifference

Ok, well, that's probably the case, let's talk about two well-regulated methods: CORS, JSONP
document.domain, window.name, web sockets, just stop making trouble, bad waist :)

2. CORS came out to make trouble

This is a standard developed by the leaders of W3C, and its full name is "Cross-origin resource sharing". In fact, most of this is the work of the back-end personnel. Let's take a look at the whole process first, what happened?

Before that, you need to know `简单请求` `复杂请求`that these two children

Simple request:
1): The request method can only be: head, get, post
2): The fields allowed in the request header: Accept, Accept-Language, Content-Language, Last-Event-ID
Content-Type: choose one of application/x-www-form-urlencoded, multipart/form-data, text/plain

2. Complicated requests: That's right, if you don't satisfy the above, it's me!

Simple request:

Browser: Hey, you want to cross domains, right? I have to ask the server brother if he is willing! Add origina bright card to the request header

有个奇怪现象，谷歌游览器在非跨域情况下，也会发送origin字段

The request header origin field is the current domain

Server: Hey, who are you, let me take a look at your origin, yes, it meets my requirements, let it go! Let me tell you by the way, old man's rules!

Among them, the most important thing is Access-Control-Allow-Originto identify which domain requests are allowed. Of course, if the server fails, there is no such field at all, and then it is triggered XHR, onerrorand then you will see the browser promptxxx的服务器没有响应Access-Control-Allow-Origin字段

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'

Access-Control-Allow-OriginThere are multiple setting methods mentioned in the first line above :

The setting *is the most simple and rude, but the server will definitely not do this for security reasons, and if it is *, the browser will not send it cookies, even if your XHRsettings are setwithCredentials
Specify the domain, as shown in the figure above http://172.20.0.206, there is one in the middle of the general system nginx, so this is recommended
It is dynamically set as the request domain. When multiple people collaborate, multiple front-ends are connected to one background, which is very convenient.

withCredentials: Indicates whether to receive cookies and send cookies, that is to say, if the value is false , the browser will ignore the XHRresponse header , and even if there are cookies from the target site, the browser will not send them.Set-Cookie

Complex request:

In the most common case, when we use putand deleterequest, the browser will send optiona (preflight) request first, but sometimes, you will find that it does not, which is what we will talk about cache later.

preflight request

Different from the simple request, the option request has 2 more fields:
Access-Control-Request-Method: the request method of this request
Access-Control-Request-Headers: the custom request header field of this request

After the server passes the check, it responds:

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间,也就是上面说到的缓存啦
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

Here is a note: Access-Control-Request-Method, Access-Control-Request-Headersall request methods and request headers that meet the requirements of the server are returned, not limited to this request,我一次性告诉你了，别TM问我了

3. Hello everyone, I am Zha Zhahui, come if you are brother dei... 咖咖哒, I am JSONP

Well, the principle of jsonp: introduce a js file through the script tag. After the js file is loaded successfully, it will execute the function we specified in the url parameter, and will pass in the json data we need as a parameter. There is a kind of callback smell!

example:

<script src="http://example.com/data.php?callback=dosomething"></script>

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>

jquery usage

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    };
</script>

Advantages and disadvantages of JSONP Advantages
: It is not restricted by the same-origin policy like the Ajax request implemented by the XMLHttpRequest object; it 兼容性更好can run in older browsers without the support of XMLHttpRequest or ActiveX; and after the request is completed The result can be returned by calling callback.

Disadvantages: It only supports GETrequests but not other types of HTTP requests such as POST; it only supports cross-domain HTTP requests, and cannot solve the problem of how to make JavaScript calls between two pages of different domains.

Link: https://www.jianshu.com/p/89a377c52b48