Cross-domain issues and solutions in Vue projects-JS Tutorial-php.cn

This time I will bring you cross-domain issues and handling methods in the Vue project. What are theprecautions for cross-domain issues and handling methods in the Vue project? The following is a practical case, let's take a look.

Problem description

Front-end vue framework, background php, Baidu cross-domain problem background add this code

header("Access-Control-Allow-Origin: *");

Copy after login

After adding this error:

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is '
include'.The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Solution

Article link: CORS: credentials mode is 'include'

xhrFields: { withCredentials: false },

Copy after login

Change

withCredentials: truetowithCredentials: false. Of course, this error will not be reported if you do not add the above code. Although the solution is very simple, I found that I have not mastered a lot of knowledge and have to sort it out.

•There are many HTTP request methods, and some requests will trigger CORS preflight requests. "Requests requiring preflight" will use the OPTIONS method to initiate a preflight request to the server to learn whether the server allows the actual request.

•Browsers generally do not send identity credential information for cross-domain requests. If you want to send credential information, you need to set the withCredentials

attributeof XMLHttpRequest to true: withCredentials: true. At this time, the server's response information is required to carry Access-Control-Allow-Credentials: true, otherwise the response content will not be returned.

•For requests carrying identity credentials, the server must not set the value of

Access-Control-Allow-Originto "*". Because the request header carriesCookieinformation. To set the value ofAccess-Control-Allow-Originto http://www.zrt.local:8080.

•In addition, the response header also carries the

Set-Cookiefield, trying to modify the Cookie. If the operation fails, an exceptionwill bethrown.

If you want to bring cookies with cross-domain requests, you must add in the request header:

crossDomain: true, xhrFields: { withCredentials: true }

Copy after login

It becomes the problem at the beginning of the article again, the solution:

Backend code:

Access-Control-Allow-Origin: 'http://www.zrt.local:8080' Access-Control-Allow-Credentials: true

Copy after login

Front-end code:

crossDomain: true, xhrFields: { withCredentials: true }

Copy after login

Just the same as before.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!