作者对Nginx了解并不多，遇到打包跨域问题，开发中直接proxy直接就可以了，多舒服，但是打包后跨域就不能直接这样解决了，这里可以用到nginx代理，学会了还可以面试中跟面试官吹久点。
这边直接cv过程解决跨域，不对nginx做详细的解释，只为解决问题，对nginx的使用有个开始，想看详细介绍的有很多大佬写，我就不出丑了。
前期准备
既然是nginx反向代理，不得下载一下nginx，nginx传送门，或者百度搜索nginx官网，第一个就是。我的电脑是win10的，具体下载以下稳定版即可
下载之后直接解压到一个文件夹下面，作者是放D盘，进入D:\nginx-1.20.1目录下，直接在当前目录下打开cmd终端
在终端中使用指令start nginx.exe开启nginx
可能用到的nginx指令
start nginx 开启
nginx -s stop 停止
nginx -s reload 重新加载
复制代码然后到浏览器输入 127.0.0.1 出现以下界面即代表成功
开始配置代理
准备跨域的项目
我这边是有跨域的项目的，打包好之后无法使用proxy处理跨域，出现了大家都熟悉的报错
项目是通过VScode插件Go Live打开的，地址是
127.0.0.1:5500,接口地址是后端打包好的jar文件，直接跑在电脑本地，所以是前端127.0.0.1:5500 与 后端接口127.0.0.1:8686端口之间的跨域
配置nginx
打开目录 nginx-1.20.1\conf里的nginx.conf文件（配置文件），原封不动的配置是如下：
#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 localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
// 待会需要修改的地方，前端项目地址②
location / {
root html;
index index.html index.htm;
}
// 待会新增跨域处理的location ③
// 其他后面的不管他
#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;
}
......
}
复制代码这里需要修改的配置是
listen 端口这里不改
server_name 监听的地址，这里改成a.com
location 请求地址过滤
location.proxy_pass 请求转向给xxx处理，这里转向127.0.0.1:5500
复制代码下面贴上某鸟介绍的配置
########### 每个指令必须有分号结束。#################
#user administrator administrators; #配置用户或者组，默认为nobody nobody。
#worker_processes 2; #允许生成的进程数，默认为1
#pid /nginx/pid/nginx.pid; #指定nginx进程运行文件存放地址
error_log log/error.log debug; #制定日志路径，级别。这个设置可以放入全局块，http块，server块，级别以此为：debug|info|notice|warn|error|crit|alert|emerg
events {
accept_mutex on; #设置网路连接序列化，防止惊群现象发生，默认为on
multi_accept on; #设置一个进程是否同时接受多个网络连接，默认为off
#use epoll; #事件驱动模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
worker_connections 1024; #最大连接数，默认为512
}
http {
include mime.types; #文件扩展名与文件类型映射表
default_type application/octet-stream; #默认文件类型，默认为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为日志格式的默认值
sendfile on; #允许sendfile方式传输文件，默认为off，可以在http块，server块，location块。
sendfile_max_chunk 100k; #每个进程每次调用传输数量不能大于设定的值，默认为0，即不设上限。
keepalive_timeout 65; #连接超时时间，默认为75s，可以在http，server，location块。
upstream mysvr {
server 127.0.0.1:7878;
server 192.168.10.121:3333 backup; #热备
}
error_page 404 https://www.baidu.com; #错误页
server {
keepalive_requests 120; #单连接请求上限次数。
listen 4545; #监听端口
server_name 127.0.0.1; #监听地址
location ~*^.+$ { #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。
#root path; #根目录
#index vv.txt; #设置默认页
proxy_pass http://mysvr; #请求转向mysvr 定义的服务器列表
deny 127.0.0.1; #拒绝的ip
allow 172.18.5.54; #允许的ip
}
}
}
复制代码以下是配置好后的文件
//从这里开始，上面不管他
server {
listen 80;
// 待会需要修改的地方，这个输入在浏览器的地址①
// 这里把地址变成一个简单的地址a.com，
server_name a.com;
#charset koi8-r;
#access_log logs/host.access.log main;
// 待会需要修改的地方，前端项目地址②
// 刚刚看到我前端项目地址是ttp://127.0.0.1:5500，这边就需要配置以下
location / {
proxy_pass http://127.0.0.1:5500;
}
// 待会新增跨域处理的location ③
// 这里指定根目录前缀是huoyin（项目名称，一般是api），可以理解成proxy的/api，配置玩之后请求的baseURL就变成 /huoyin了
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;
}
......
复制代码请求前端项目中接口请求的修改，我的项目是React的antd Pro项目，是prefix更改为/huoyin。
接下来打包，在浏览器上输入a.com，可以正常访问了，没有出现跨域的错误，但是又多了几个错误，
添加以下代码得到解决
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";
}
复制代码正常打包，跨域得到解决
最后贴上所有代码
#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.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1: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;
# }
#}
}
复制代码
