Companion Cookie How to implement AJAX cross-domain requests

This article brings you the content is about how to implement the Ajax cross-domain request, there is a certain reference value, the need for friends can refer to, I hope to help you.

In the actual development of the project, we always encounter the front-end separation of the project, in such projects, cross-domain is the first to solve the problem, in addition, the preservation of user information is also very important, however, in the background to save the user information is usually used by the session and cookie combination method, In the front-end of the actual situation, the cross-domain generated AJAX is unable to carry cookie information, which caused the session and cookie user information storage mode is affected, how to solve such a problem, by looking at the information, I here to Angularjs of $ An example of an AJAX request in HTTP.

First, in the background, I use the filter of the servlet to intercept all requests and set the request header:

Solving cross-over problems

Response.setheader ("Access-control-allow-origin", "*");        Response.setheader ("Access-control-allow-methods", "*");        Response.setheader ("Access-control-max-age", "3600");        Response.setheader ("Access-control-allow-headers", "Dnt,x-mx-reqtoken,keep-alive,user-agent,x-requested-with, If-modified-since,cache-control,content-type,authorization,sessiontoken ");

Allow cross-domain requests to carry        a cookie Response.setheader ("Access-control-allow-credentials", "true");

The upper part of the code is the code that solves the cross-domain problem, while the second part of the Response.setheader ("Access-control-allow-credentials", "true") is the code that allows the cookie to be allowed in the backend.

Front-End Code:

$scope. Login = function () {                $http ({                    //Set request can carry Cookie                    withcredentials:true,                    method: ' Post ',                    Params: $scope. User,                    URL: ' Http://localhost:8080/user/login '                }). Then (function (res) {                    alert ( res.data.msg);                }, Function (res) {                    if (res.data.msg) {                        alert (res.data.msg);                    } else {                        alert (' Network or set error ');}}                )            }

From the above code, we are not difficult to know, in the cross-domain request in the front-end is the most important point is withcredentials:true, this statement combined with the background settings of "Access-control-allow-credentials", "true" Can carry a cookie in a cross-domain Ajax request.

However, I found some problems while I was testing, when the request was sent, the browser error was as follows

Response to preflight request doesn ' t pass access control CHECK:A wildcard ' * ' cannot being used in the ' Access-control-allo W-origin ' header when the credentials flag is true. Origin ' null ' is therefore not allowed access. The credentials mode of an XMLHttpRequest are controlled by the Withcredentials attribute.

By consulting the relevant information, this only found that the reason is to solve the cross-domain code in the background response.setheader ("Access-control-allow-origin", "*"), this part and set the cross-domain to carry the cookie part of the conflict, When I find out about setting up a cross-domain Ajax request to carry a cookie, you must specify Access-control-allow-origin, meaning that it cannot be a value of *, but that the front-end IP is a change in the case of front-to-back separation, and the feeling is back to the origin. Can't you use this approach to solve the problem of Ajax cross-domain and carry cookies?

Next, in my study of the AJAX request I made, I found that in Angularjs, the origin request header value in each request was "null", what does that mean? So I put the backstage "Access-control-allow-origin", "*" changed to "Access-control-allow-origin", "null", the next thing became beautiful, All AJAX requests can be successfully attached with cookies, successfully achieving the goal.

Response.setheader ("Access-control-allow-origin", "null");