cross domain
As a front-end developer, the inevitable problem is cross-domain, so what is cross-domain?
Cross-domain: Refers to the fact that the browser cannot execute scripts from other websites. It is caused by the browser's same-origin policy, which is a security restriction imposed by the browser on javascript. The browser's same-origin policy means that the protocol, domain name, and port must be the same, and any difference in one of them will result in cross-domain.
So how to solve the cross-domain problem. Discussing with the backend can also solve cross-domain problems through CORS. But the front-end cubs who are strong in their lives can also solve it by themselves.
webpack-dev-server reverse proxy
webpack-dev-server helps us solve this pain point, which is implemented based on the Node proxy middleware http-proxy-middleware .
Configuration:
proxy: {
'/api': {
target: 'https://xxx.com', // 反向代理的目标服务
changeOrigin: true, // 开启后会虚拟一个请求头Origin
cookieDomainRewrite: {
'.xxx.com': 'localhost',
}, // 修改响应头中 cookie 中的域名
}
}
What is a reverse proxy
To put it simply, A needs to send a request to C , but C is unwilling to know A , but A knows B , A sends a request to B , but B will not return anything, but he can return the request to C , then B sends a request to C again , and C returns the request to B for the sake of B , and B returns the request to A. . . .
Specifically in development, the front-end needs to call the interface to the domain name https://xxx.com , but the startup project of the front-end development environment is https://localhost:8080 service, and calling the interface directly will cross domains.
So the front end needs to be a layer of proxy. Direct request from https://localhost:8080 to the interface of https://xxx.com domain name should be imperceptible to the front end.
The reverse proxy hides the real server;
The problem of switching environment debugging
is coming. If we are developing new requirements, but there are online bugs at this time, what should we do?
1. Switch branches first
. 2. Modify the domain name of the target.
3. Restart.
Every time I reach the second step, I have to ask in which environment it can be reproduced. Although this process is not complicated, if it can be omitted, do you want to I'm happier thinking about it.
Extract the proxy layer
If possible, the frontend no longer needs to bundle the frontend compilation process with the service proxy target. Might as well try it with Nginx.
1. Install Nginx;
2. Fixed front-end proxy;
proxy: {
'/api': {
target: '127.0.0.1:8080', // 固定IP
changeOrigin: true, // 开启后会虚拟一个请求头Origin
cookieDomainRewrite: {
'.xxx.com': 'localhost',
}, // 修改响应头中 cookie 中的域名
}
}
3. Nginx proxy
server {
listen 8080; // 这里是我们想要默认访问的端口
server_name 127.0.0.1; // 这里是想在浏览器里访问的地址
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://xxx.com; // 这里是你在本地启动的时候的链接，例如localhost:4043，换个端口号就行了
autoindex on;
}
}
With the above configuration, we can decouple the front-end proxy layer from the Nginx proxy layer. The front-end accesses the back-end interface through the local 127.0.0.1:8080, and the specific interface is the proxy to the development environment, test environment or production environment. It is decided by Nginx, you only need to modify nginx.conf and restart. And Nginx hot restart is very fast, a command can be achieved, almost zero waiting time.
// windows下是这个命令
nginx.exe -s reload
// linux是这样的
nginx -s reload
fixed port
What if the port is occupied?
The easiest way is to change the port, but changing the port to modify the Nginx configuration file is more complicated than modifying the proxy, so we can only find another way. Is there any way to transfer the ip or port again? The answer is to modify the hosts file
When the user visits www.jia.com, the IP address 127.0.0.1 will be resolved. So modify the Nginx configuration to listen to port 80 of 127.0.0.1
server {
listen 80; // 这里是我们想要默认访问的端口
server_name 127.0.0.1; // 这里是想在浏览器里访问的地址
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://xxx.com; // 这里是你在本地启动的时候的链接，例如localhost:4043，换个端口号就行了
autoindex on;
}
}
Then modify the local proxy configuration
proxy: {
'/api': {
target: 'www.jia.com', // 固定IP
changeOrigin: true, // 开启后会虚拟一个请求头Origin
cookieDomainRewrite: {
'.xxx.com': 'localhost',
}, // 修改响应头中 cookie 中的域名
}
}
In this way, the front-end access interface domain name https://xxx.com will be proxied to https://www.jia.com, and https://www.jia.com is resolved to 127.0.0.1 by local hosts, and then Nginx listens Port 80 of 127.0.0.1, the request is forwarded to the real backend service!