一:简介
本文章介绍如何通过nginx路由代理转发。主要是解决前端vue使用了路由代理方式,然后在使用nginx转发时就请求获取不到接口真实地址,所以需要在nginx配置文件中进行相应配置,具体啥配置…哈哈哈看下面吧
二:nginx配置
server {
listen 8084; #nginx转发端口
server_name localhost; #服务器名称
#charset koi8-r;
#access_log logs/host.access.log main;
#代理http地址(pigFarmServer头部用于区分表示是那个路由)
location ~ /pigFarmServer/ {
rewrite ^/pigFarmServer/(.*)$ /$1 break;
proxy_pass http://localhost:8081; #接口服务器地址ip:端口
}
#代理websocket地址(socket头部用于区分表示是那个路由)
location ^~ /socket/ {
rewrite ^/socket/(.*)$ /$1 break;
proxy_pass http://localhost:8081; #接口服务器地址ip:端口
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_read_timeout 120s;
proxy_set_header Upgrade websocket;
proxy_set_header Connection Upgrade;
}
#代理html前端地址
location / {
root D:/xm/vsofo_iot_client/dist; #vue build打包dist绝对路径
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
- 至于什么时候用波浪线?
~,波浪线表示执行一个正则匹配,区分大小写 ~*,表示执行一个正则匹配,不区分大小写 ^~,表示普通字符匹配,如果该选项匹配,只匹配该选项,不匹配别的选项,一般用来匹配目录 =,进行普通字符精确匹配 @,定义一个命名的 location,使用在内部定向时,例如 error_page, try_files
|