Home > Web Front-end > JS Tutorial > body text

Cross-domain processing methods in Vue projects

php中世界最好的语言
Release: 2018-05-08 14:18:52
Original
1501 people have browsed it

This time I will bring you the cross-domain processing method in the Vue project. What are the precautions for cross-domain processing 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
Add After this error was reported:

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: true to withCredentials: 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

attribute of 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-Origin to "*". Because the request header carries Cookie information. To set the value of Access-Control-Allow-Origin to http://www.zrt.local:8080.

•In addition, the response header also carries the

Set-Cookie field, trying to modify the Cookie. If the operation fails, an exception will be thrown.

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
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
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!

Recommended reading:

What steps are required for js to obtain ModelAndView

How to deal with flickering when vue renders

The above is the detailed content of Cross-domain processing methods in Vue projects. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template