[planting trees and enjoying the cool] cross domain

This article has participated in the third phase of nuggets creators training camp 「 High yield Gengwen 」 Track , View details ： Project digging ｜ The third phase of the creator training camp is under way ,「 Write 」 Personal influence .

What is cross-domain ？

Our browser is in security considerations , Only Ajax Access the interfaces under this domain . If there is no authorization , It can't cross domain .

The above sentence , It's also called ： The same-origin policy .

that , What is a local domain ？

• Same agreement ： For example, all of them are http Or both https
• Same as domain name ： such as github.com/pany-ang and github.com/v3-projects…
• Same port ： For example, all of them are 80 port （ If the port number is not specified in the domain name , that http The default is 80 port ,https Default 443）

Doing the above three things at the same time is the domain .

for instance ：

github.com/pany-ang and github.com/v3-projects…

There is no cross domain between the above two domain names , Their agreements are https, Domain names are github.com, Ports are all 443.

in other words , When our page is sent Ajax When asked , If the server interface accessed is not the interface of this domain , Then cross domain （ That is, the domain name of the current page and the domain name of the interface are not " The domain "）.

How to solve cross domain problems ？

Since the browser doesn't allow us to cross domain , But we want to implement the cross domain call interface , At this time, we have to find a way to allow our applications to cross domains .

JSONP

This method has a sense of time , Not many times now .

Before talking about this implementation , We need to understand one thing ：

<script src=" Here is JS Path to file "></script>
 Copy code 

The meaning of the above code is to introduce an external JS, I think everyone knows . Its final effect is equivalent to ：

<script> Here is the introduction JS The source code in the file </script>
 Copy code 

But this code can also be written like this ：

<script src=" Here is the path of the interface provided by the back end "></script>
 Copy code 

Its final effect is equivalent to ：

<script> Here is the data returned by the back-end interface </script>
 Copy code 

No mistake. , When we go through Ajax When the provider involves cross domain , Through the above code, it will not be judged as cross domain .

In this way , We don't have to worry about cross domain to get the data returned by the interface .

But the problem is ,

The data we get is usually JSON Format , And data is just data , It is “ die ” Of . We usually go through AJAX After getting the data, use a callback function to process it , But now we use this “ clever ” After getting the data, there seems to be no way to deal with it .

That's what we're going to do ： Add a function name when the back end returns data ：  " data " Turn into " Function name ( data )", Put the original data , Put it in the position of the parameter .

" data " Turn into " Function name ( data )"   The end result is ：

<script> Here is the data returned by the back-end interface </script>
 Copy code 

Turn into ：

<script> Function name ( data )</script>
 Copy code 

If the returned data is preceded by a function name , And our front-end code also has a pre written function with the same name , Then it is equivalent to calling this function in our front-end code . We can use this function to process the returned data .

CORS

Here I just briefly introduce CORS To achieve cross domain （ In fact, it was also very simple ...）

principle ： send out Ajax On request , If it's cross domain , The browser will automatically help us add a request header to the request Origin , The background determines whether to return data , If the background judges that “ Should return data ”, Just add a response header to the returned result Access-Control-Allow-Origin; At this time, the browser determines whether there is... In the response header Origin Value , If there is , We can successfully get data across domains , without , Cross domain failure .

In this way , The front end basically doesn't need to be changed , A similar statement needs to be added to the back end ：

res.header("Access-Control-Allow-Origin", "*"); // *  Indicates that all domain names are allowed to access 
 Copy code 

Reverse proxy

principle ： Since the cross domain problem is caused by the browser's homology strategy , So we don't directly call the back-end interface through the browser , Instead, enable an intermediate proxy service , It can request the corresponding interface .

With Vue For example , The development environment is configured as follows ：

proxy: {
  '/api/': {
    target: 'http://xxxxxx/api/',
    ws: true,
    pathRewrite: {
      '^/api/': ''
    },
    changeOrigin: true,
    secure: false
  }
}
 Copy code 

The corresponding production environment , You can use  nginx  To be a reverse agent .

other

Of course , There are other scenarios to solve cross domain problems , such as Delocalization 、postMessage, But these are commonly used to solve cross domain problems of pure front-end （ such as A visit B Page data ）, This article will not explain too much .