JIYIK CN >

In web programming, we often encounter cross-domain issues. By default, browsers do not allow cross-domain access. Therefore, there is a concept here: CORS (Cross-Origin Resource Sharing).

Before the HTML5 standard came out, CORS was not allowed. However, in order to achieve the purpose of cross-domain access to resources, many troublesome methods emerged: jsonp, proxy files, address bar hash, etc. With the emergence of HTML5, CORS solved a big problem for us.

CORS is widely used. Recently, CORS is also used when doing SSO. For a detailed introduction to CORS, you can refer to the article "Detailed Explanation of Cross-Domain Resource Sharing CORS" by Mr. Ruan Yifeng . Here we only introduce the following two situations.

Ajax cross-domain simple access

To achieve cross-domain access, we must first understand that the most important point of CORS to achieve cross-domain access is to set the Access-Control-Allow-Origin parameter.

If I have two sites

www.onmpw.com
www.jiyibk.com

I access jiyibk via ajax on my onmpw site.

$.ajax({
         url:'http://www.jiyibk.com/index.php',
         dataType:'json',
         type:'post',
         data:{id:1},
         success:function(data){
                   console.log(data);
         },
         error:function(err){
                   console.log(err);
         }
})

If we do not make any settings, a prompt will appear prohibiting cross-domain access

To solve this problem, we need to use the Origin parameter in the http request header.

The Origin parameter represents the source site. Therefore, we only need to set Access-Control-Allow-Origin on the jiyibk server, and the allowed website is the Origin option value in the request header.

<?php
         header("Access-Control-Allow-Origin:".$_SERVER[‘HTTP_ORIGIN’]);

You only need to set up the server, and you can achieve cross-domain access without any other settings on the client. However, the above settings only allow cross-domain access, and cookies cannot be set or read across domains. Next, we will set up cross-domain cookies.

Ajax cross-domain cookie settings

We have implemented ajax cross-domain access above, but we still cannot set cookies. To set cross-domain cookies, we also need to set another important parameter of CORS, Access-Control-Allow-Credentials.

Different from the above settings, this item is not only set on the server, but also needs to be set on the client.

The client is as follows:

$.ajax({
         url:'http://www.jiyibk.com/index.php',
         xhrFields: {withCredentials: true},
         dataType:'json',
         type:'post',
         data:{id:1},
         success:function(data){
                   console.log(data);
         },
         error:function(err){
                   console.log(err);
         }
})

The ajax setting through jQuery is relatively simple. Just add xhrFields: {withCredentials: true}, and the client can be said to be set up.

Next is on the jiyibk server:

<?php
    header("Access-Control-Allow-Origin:". $_SERVER[‘HTTP_ORIGIN’]);
    header("Access-Control-Allow-Credentials: true ");

After the above settings, you can set cookies across domains.

CORS provides great convenience for us to develop web applications. This article only briefly introduces the problem of setting cookies across domains via ajax. There are still other in-depth things to be explored. In short, I hope this article can help you.