The author does not know much about Nginx, encountered packaging cross-domain problems, the development of direct proxy can be more comfortable, but after packaging cross-domain can not be directly so solved, here you can use Nginx proxy, learned to also interview with the interviewer blow for a long time.
Nginx, nginx, nginx, nginx, nginx, nginx, nginx, nginx, nginx, nginx, nginx, nginx, nginx
preparation
If you are a nginx reverse proxy, you are not allowed to download nginx, nginx portal, or search the nginx website. My computer is Win10, specific download the following stable version
Start nginx on the terminal using the start nginx.exe command
Possible nginx directives
Start nginx enable nginx -s stop Stop nginx -s reloadCopy the codeThen go to your browser and type 127.0.0.1
Start configuring the proxy.
Prepare cross-domain projects
There is a cross-domain project on my side. After it is packaged, proxy cannot be used to deal with cross-domain, and a familiar error occurs
127.0.0.1:5500The interface address is the jar file packaged at the back end, which runs directly in the local computer, so it is the front end127.0.0.1:5500Interface with the back-end127.0.0.1:8686Cross-domain between ports
Configure nginx
Open the nginx.conf file in the nginx-1.20.1\conf directory. The configuration file is as follows:
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
// From here on, they leave him alone
server {
listen 80;
// If you need to change something later, enter this in the browser address ①
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
// What needs to be modified later is the address of the front-end project ②
location / {
root html;
index index.html index.htm;
}
// Location ③ for cross-domain processing will be added later
// The others leave him alone
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504/50x.html; location = /50x.html { root html; }... }Copy the codeThe configuration that needs to be modified here is
Proxy_pass Requests are forwarded to XXX for processing, and 127.0.0.1:5500 is forwarded to XXX for processingCopy the codeThe configuration described by a bird is posted below
########### Each instruction must end with a semicolon. ################# #user administrator administrators; Configure the user or group. Default is nobody nobody. #worker_processes 2; Pid /nginx/pid/nginx.pid Error_log log/error.log debug; Specify log path, level. This setting can fit into a global, HTTP, server block level to: debug | info | notice | warn | error | crit | alert | emerg events {accept_mutex on; Set network connection serialization to prevent stampedes, default to on multi_accept on; If a process accepts multiple network connections at the same time, the default is off. # event driven model, select | poll | kqueue | epoll | who | / dev/poll | eventport worker_connections 1024; HTTP {include mime.types; Default_type application/octet-stream; The default file type is text/plain #access_log off. Log_format myFormat '$remote_addr - $remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; Access_log log/access.log myFormat; #combined = default value sendFile on; # allow sendFile transfer, default is off, HTTP block, server block, location block sendfile_max_chunk 100k; The number of transfers per call cannot exceed the set value. The default value is 0, that is, no upper limit is set. keepalive_timeout 65; # connection timeout, default is 75s, can be in HTTP, server, location block. Upstream mysvr {server 127.0.0.1:7878; 3333 backup server 192.168.10.121:; # hot standby} error_page 404 https://www.baidu.com; Server {keepalive_requests 120; # Maximum number of single connection requests. listen 4545; Server_name 127.0.0.1; Location ~*^.+${# request url filtering, regular matching, ~ is case sensitive, ~* is case insensitive. #root path; # root directory #index vv.txt; Proxy_pass http://mysvr; Mysvr defines the server list to deny 127.0.0.1; Allow 172.18.5.54; # allowed IP}}}Copy the codeThe following is the configured file
// From here on, they leave him alone
server {
listen 80;
// If you need to change something later, enter this in the browser address ①
// Change the address to a simple address.
server_name a.com;
#charset koi8-r;
#access_log logs/host.access.log main;
// What needs to be modified later is the address of the front-end project ②
// I just saw that my front-end project address is TTP ://127.0.0.1:5500, so I need to configure the following
location / {
proxy_pass http:/ / 127.0.0.1:5500;
}
// Location ③ for cross-domain processing will be added later
// The root directory prefix is huoyin (project name, usually API), which can be interpreted as proxy/API
location /huoyin/ {
proxy_pass http:/ / 127.0.0.1:8686;
}
// The others leave him alone
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504/50x.html; location = /50x.html { root html; }...Copy the codeRequest modification of interface request in front-end project. My project is antD Pro project of React, and prefix is changed to /huoyin.
Add the following code to solve the problem
location / {
proxy_pass http:/ / 127.0.0.1:5500;
// Add it here
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
Copy the codeNormal packaging is resolved across domains
Finally, paste all the code
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name a.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http:/ / 127.0.0.1:5500;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location /huoyin/ {
proxy_pass http:/ / 127.0.0.1:8686;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0. 01.:80
#
#location ~ \.php$ {
# proxy_pass http:/ / 127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0. 01.:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0. 01.:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root # concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
Copy the code