Cross-domain cors application scenarios and reverse proxies (cors cross-domain axios)

Cross-domain cors application scenarios and reverse proxies (cors cross-domain axios)

Hello everyone, I am an author who loves to write. Today, I would like to talk to you about cross domain cors application scenarios and reverse proxies. Maybe for some of you, this term sounds unfamiliar, but trust me, through my story, you will definitely have a deeper understanding of them.

Cross-domain (cors)

First, let's talk about cross-domain (cors). In the world of the Internet, each website has its own territory, like an island. When we request resources from one site (island) to another site (island), a cross-domain problem occurs. And this problem is like an impassable sea between two islands.

We can imagine that if I need to get delicious fruits from an island, but there is no fruit stand on this island, what should I do? At this time, cross-domain (cors) is like a bridge that connects two islands. It allows us to exchange and share resources between different islands.

In practice, cross-domain (cors) is often used to allow front-end applications to request resources under other domains. For example, when our web application needs to get data from different servers, we need to use cross-domain (cors) to realize this function.

Sample code:
"`javascript
fetch('http://www.example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
“`
In the above code, we sent a GET request via fetch API to the API interface (/api/data) under another domain (http://www.example.com) and got the data from it.

reverse proxy

Okay, now let's talk about reverse proxies. Imagine we are a small river, and many islands rely on the river to get the resources they need. But at this time, the islands can not communicate directly with each other, they can only interact with the river to complete the transfer of resources.

A reverse proxy is like a small kiosk located on the edge of a river that plays the role of connecting different islands. When our request reaches the reverse proxy, it will help us forward the request to the target island and forward the response we get back. In this way, we can easily access resources on other islands.

In actual development, reverse proxy is usually used when our front-end application needs to request resources under different domains, but due to cross-domain (cors) limitations, we can't send the request directly. By setting up a reverse proxy, we can send the request to a server of the same origin, and the server will help us forward it to the target domain.

Sample code:
"`javascript
// Configure the reverse proxy in vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://www.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': "
}
}
}
}
};
“`
In the above code, we have used the proxy configuration functionality provided by the Vue CLI. By forwarding requests under the `/api` path to the `http://www.example.com` domain and removing the `/api` path at the same time, we have implemented a simple reverse proxy.

concluding remarks

Through today's story, we have learned about cross domain (cors) application scenarios and reverse proxies. Cross-domain (cors) is like a bridge that connects different websites, it allows us to share resources freely in the Internet world. Reverse proxies, on the other hand, are like a kiosk located on the edge of a river that helps us connect resources under different domains.

In practice, we can use cross domain (cors) and reverse proxy to solve the problem of front-end applications to access resources under different domain names. They are an important part of our development toolkit, we need to understand their principles and usage.

I hope that through today's story, you have gained a better understanding of cross domain (cors) and reverse proxies. May you go farther and farther on the road of front-end development and create more beautiful islands and kiosks! Thank you all!