Front-end Learning Note 01 — Vue solves cross-domain problems

Cross-domain problems are fairly common on the front end, and before we solve them, we can understand why we need to cross domains. The following is from MDN, link: Same Origin policy for browsers. So far, I have only tried Vue solutions for cross-domain, so I only know Vue solutions, and some things will be improved in the future!

The same origin policy of the browser

First, the cross-domain problem is caused by the browser’s same-origin policy. The same origin policy is an important security policy that restricts how documents from one source or scripts loaded by it can interact with resources from another source. It can help block malicious documents and reduce the number of vectors that can be attacked.

Check whether the script is of the same origin as your own. Only scripts with the same origin as your own will be executed. Otherwise, the browser will issue an error on the console and deny access.

Definition of homology

Two urls are cognate if they have the same protocol, port (if specified), and domain name. This scheme is also known as a “protocol/host/port tuple”, or simply “tuple”. (” tuple “refers to a group of items as a whole, the general form of double/triple/quadruple/quintuple/etc.)

The following table shows whether compared with http://beijing.company.com/home/index.html homologous

Vue addresses cross domains

Proxy proxies are commonly used in VUE to solve cross-domain problems. The Vue CLI version I used is 4.5.9, but the new version does not have the original config folder, so we need to create a configuration file called vue.config.js under the root directory of the project folder, and then configure proxy in it. The code is as follows.

module.exports = {
  devServer: {
    proxy: {
      '/api': { // There'd better be a/here
        target: 'http://192.168.119.193:8080'.// Background interface domain name
        changeOrigin: true.// Whether to allow cross-domain setting to true
        pathRewrite: {  // Rewrite the domain name
          '^/api': '/'}},}}}Copy the code

After the configuration, we will use the new domain name to replace the original IP address and port, as follows

    // For example, we used to access the interface like this
this.$axios.get("http://192.168.119.193:8080/addUser").then (
   (response) = > {
     // handle success
   }).catch((error) = > {
     // handle error
   })
   
   // Now replace the interface like this
this.$axios.get("/api/addUser").then (
   (response) = > {
     // handle success
   }).catch((error) = > {
     // handle error
   })
Copy the code

conclusion

In the process of implementation, there are some possible problems, remember to restart the project after the configuration, I did the first time because of this reason wasted a lot of time, then remember to create the configuration file in the root directory of the project file. Some other weird questions: For example, when I write an interface, if I write API /addUser, I can also access the index component, but if I access a child of the index component, it will be invalid, but with the previous “/”, no problem. Therefore, I would like to write/API /addUser.