Hit the pit horror

At ordinary times, the wechat sharing configuration file is configured in the background and put on the server, which is directly referenced by the front end. Subsequently, due to business needs, it is changed to customized sharing content, and the background configuration is received by the front end to achieve customized sharing. At this time, I do not know, a big pit is waiting for my arrival in front……

Access to XMLHttpRequest at 'http://map.museum.chaoxing.com/beacon/config?urlhttp://file.museum.chaoxing.com/frontendTest/standard/index.html#/' from origin 'http://file.museum.chaoxing.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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 credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Copy the code

Step pit analysis:

A face of meng forced me to Google Baidu to join the battle, blog documents turned up, finally work pays off, let me in Ruan Yifeng teacher’s blog to find the answer, this blog post is simple, comprehensive and thorough explanation of cross-domain problems, amway wave ~

Cross-domain resource sharing (CORS

If you want to send cookies, access-Control-allow-Origin cannot be set to an asterisk and must specify an explicit domain name consistent with the requested web page. At the same time, cookies still follow the same origin policy, only the Cookie set with the server domain name will be uploaded, cookies of other domain names will not be uploaded, and (cross-source) document. Cookie in the original web page code can not read cookies under the server domain name.

This is because the front end sets withCredentials: True when intercepting HTTP requests

Const HTTP = axios.create({baseURL: window. site_config. baseURL, // API base_url timeout: 1000 * 30, withCredentials:true,
  headers: {
    "Content-Type": "application/json; charset=utf-8",}})Copy the code

Take off the pit guide

CORS requests do not send cookies and HTTP authentication information by default. To send cookies to the server, specify the access-Control-allow-credentials field with the server’s permission. Access-Control-Allow-Credentials: true

On the other hand, the developer must turn on the withCredentials attribute in the AJAX request. var xhr = new XMLHttpRequest(); xhr.withCredentials = true; Otherwise, the browser won’t send a Cookie, even if the server agrees to do so. Or, if the server asks for a Cookie, the browser won’t handle it.

However, if the withCredentials setting is omitted, some browsers still send cookies together. In this case, you can explicitly disable the withCredentials.

So if you do not need to send cookies to the server, you only need to set withCredentials: Access-control-allow-origin: false false: access-Control-allow-origin: access-Control-allow-origin: access-Control-allow-origin: access-Control-allow-origin: access-Control-allow-origin: access-Control-allow-origin: access-Control-allow-origin: access-Control-allow-origin

Get new knowledge! Foraging to also ~