作者对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;
# }
#}
}
复制代码