Processing of vue2.6 is cross-domain

This is the 10th day of my participation in Gwen Challenge

As shown in the question, today we will introduce how to deal with this cross-domain problem in the VUE ~ (mainly in the previous learning vUE pit 🕳 haha).

Cross domain is introduced

Cross-domain is caused by the browser’s same-origin policy, which is a security measure! Can reduce XSS, CSFR attacks, etc.

The same domain name, protocol, and port are the same

There’s a reason for cross-domain

1. Agreement is different
2. Domain name is different
3. Different ports

To deal with

Previously, in Java backend projects, the @crossorigin annotation could have solved this problem, and Nginx could have done the reverse proxy, but now it needs to be solved in the front end

How do you solve it?

1. Go back to the WebPack we used earlier.

   Webpack official website devServer

   

2. Use of devServer in VUE

Configure the following code in vue.config.js

module.exports = {
  configureWebpack: {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://192.168.101.110:8888'.// A virtual server is created locally and sends the requested data and receives the requested data at the same time, so that there is no cross-domain problem between the server and the server
          changeOrigin: true.ws: true
          // ,
          // pathRewrite: {
          // '^/api': '/api'
          / / / / replace the target address of the request, that is to say you at the time of request http://api.jisuapi.com/XXXXX this address directly after written/API
          // }
        }

      }
    }
  }
}
Copy the code

This will solve the cross-domain problem

Of course, there are other excellent solutions, which are also found by accident, see below

Article recommendation! :

The following article gives a very comprehensive overview of how to handle cross-domain issues!

Including the following 👇

Cross-domain solutions

1. Cross domains through JSONP

Document.domain + iframe cross domain

3. Location. hash + iframe

4, window.name + iframe cross domain

5. PostMessage crosses domains

6. Cross-domain Resource Sharing (CORS)

7, Nginx proxy cross domain

Nodejs middleware proxy across domains

9. WebSocket protocol is cross-domain

Increase knowledge! 😝

👉 Common cross-domain solutions at the front end (full)

The last

Welcome friends to discuss the question ~

If you think this article is good, please give it a thumbs-up 😝

Let’s start this unexpected meeting! ~

Welcome to leave a message! Thanks for your support! ヾ(≧▽≦*)o go!!

I’m 4ye and I’ll see you soon next time!!