The problem background

Vue project using axios to call a public open API service (access-Control-allow-Origin :*)

Performance problems

  • The code inside the AXIos service (some of the logical code has been omitted)
// request.js... axios.defaults.withCredentials =true;
axios.defaults.crossDomain = true;
axios.interceptors.request.use(config= > {
  ……
  config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
  config.headers[website.tokenHeader] = 'bearer ' + getToken()
  config.headers["Content-Type"] = "text/plain"; ... })...// index.js
export const getData = () = > request({
  url: 'http://location.tianditu.gov.cn/data/getCityName?callback=query'.method: 'get'
});
// index.vue
getData().then(res= > {
  const data = res.data;
})
Copy the code
  • Error message in axios service

  • Request header information

Access-control-allow-origin = access-Control-allow-origin = access-Control-allow-origin = access-Control-allow-origin = access-Control-allow-origin I’m not convinced, so I add JQuery to the current project and use the $method to initiate Ajax requests

$.ajax({
    type:"get".url:"http://location.tianditu.gov.cn/data/getCityName?callback=query".success: function(data) {
      console.log(data)
    }
  });
Copy the code

Preliminary conclusions

This is a somewhat metaphysical interface, JQuery is normal, axios is cross-domain request

So I have a variety of Google, still have no clue, some masters have encountered such a problem, put forward but did not give except a perfect explanation, just when I was ready to give up, suddenly accidentally swept ruan Yifeng teacher five years ago a cross-domain resource sharing CORS detailed explanation

Two requests from the browser

Browsers classify requests into two categories: simple request and not-so-simple Request.

  • Simple request (both of the following conditions must be met)

    1. The request method is one of three
      • HEAD
      • GET
      • POST
    2. HTTP headers do not exceed the following fields:
      • Accept
      • Accept-Language
      • Content-Language
      • Last-Event-ID
      • Content-type: is limited to three valuesapplication/x-www-form-urlencoded,multipart/form-data,text/plain

  • Non-simple request (anything that is not a simple request is a non-simple request)

    Non-simple requests are requests that have special requirements on the server, such as a PUT or DELETE request method or a Content-type application/ JSON request. Non-simple requests add an HTTP query request, called a “preflight” request, before formal communication. The browser asks the server if the domain name of the current web page is on the server’s license list, and what HTTP verb and header fields can be used. The browser issues a formal XMLHttpRequest request only if it receives a positive response; otherwise, an error is reported.

Goldbach conjecture

Axios is cross-domain because it makes a non-simple request with AXIos, whereas JQuery is just a simple request, and cross-domain because of preflight of non-simple requests

Non-simple requests initiated by the AXIos service

$. Ajax initiation is simple please

conclusion

The previously wrapped AXIos service brought too many unnecessary headers, causing the simple request to become a non-simple request, which then launched a Preflight, and the third-party service may have had some problems with the prechecked request, causing the browser to mistake it for a cross-domain request

With the old AXIos service, simple requests can be happily made without the redundant headers or with a new AXIos