活动介绍
file-type

nginx proxy_pass 路径转发详解:'/'的微妙影响

96KB | 更新于2024-09-01 | 55 浏览量 | 5 评论 | 1 下载量 举报 收藏
download 立即下载
"详解proxy_pass根据path路径转发时的”/”问题记录" 在Nginx服务器配置中,`proxy_pass`指令用于将接收到的HTTP请求转发到指定的上游服务器。这个指令的使用方式会影响到路径如何被处理,特别是在使用特殊匹配规则如`^~`时。`^~`表示路径前缀匹配,并且具有最高的优先级,一旦匹配成功,其他正则表达式将不再被检查。 在`proxy_pass`后面跟的URL末尾是否添加`/`,会直接影响到请求路径的转发行为: 1. URL末尾带`/`的情况: 如果`proxy_pass`后的URL以`/`结尾,例如: ``` location ^~ /wangshibo/ { proxy_cache js_cache; proxy_set_header Host js.test.com; proxy_pass http://js.test.com/; } ``` 这样的配置意味着,当请求路径以`/wangshibo/`开头时,Nginx将不会传递`/wangshibo/`后面的任何内容给上游服务器`http://js.test.com/`。因此,如果请求是`http://servername/wangshibo/test.html`,实际被代理的URL将是`http://js.test.com/test.html`,Nginx会忽略掉`/wangshibo/`这部分。 2. URL末尾不带`/`的情况: 当`proxy_pass`后的URL不以`/`结尾,例如: ``` location ^~ /wangshibo/ { proxy_cache js_cache; proxy_set_header Host js.test.com; proxy_pass http://js.test.com; } ``` 这种情况下,Nginx会将整个匹配的路径(包括`/wangshibo/`)一起转发给`http://js.test.com`。所以,请求`http://servername/wangshibo/test.html`会被代理到`http://js.test.com/wangshibo/test.html`,上游服务器会看到完整的原始路径。 3. 使用`rewrite`进行路径转换: 如果需要保留`/wangshibo/`路径前缀并正确转发,可以使用`rewrite`指令来处理: ``` location ^~ /wangshibo/ { proxy_cache js_cache; proxy_set_header Host js.test.com; rewrite /wangshibo/(.*)$ /$1 break; proxy_pass http://js.test.com; } ``` 这里的`rewrite`规则会移除`/wangshibo/`前缀,并将剩下的路径部分传递给`proxy_pass`,这样请求`http://servername/wangshibo/test.html`会被代理到`http://js.test.com/test.html`。 在实际应用中,根据服务器集群的部署和路由需求,正确处理`proxy_pass`中的路径是非常关键的。这不仅影响到客户端请求的实际目标,也可能影响到缓存策略、负载均衡以及其他依赖于请求路径的服务功能。因此,在配置Nginx时,务必仔细考虑和测试`proxy_pass`的路径处理方式。

相关推荐

filetype

'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const CompressionPlugin = require('compression-webpack-plugin') const name = process.env.VUE_APP_TITLE || '其亚管理系统' // 网页标题 const port = process.env.port || process.env.npm_config_port || 80 // 端口 // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分,具体配置参考文档 module.exports = { chainWebpack: config => { config.module .rule('tinymce') .test(/tinymce\/.*\.js$/) .use('babel-loader') .loader('babel-loader') .end() }, // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 // 例如 https://www.qiya.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.qiya.vip/admin/,则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/" : "/", // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist) outputDir: 'dist', // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) assetsDir: 'static', // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 productionSourceMap: false, transpileDependencies: ['quill'], // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: 81, open: true, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://218.31.203.46:8081`, hangeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' }, } }, disableHostCheck: true }, css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded" } } } }, configureWebpack: { name: name, resolve: { alias: { '@': resolve('src') } }, plugins: [ // http://doc.qiya.vip/qiya-vue/other/faq.html#使用gzip解压缩静态文件 new CompressionPlugin({ cache: false, // 不启用文件缓存 test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式 filename: '[path][base].gz[query]', // 压缩后的文件名 algorithm: 'gzip', // 使用gzip压缩 minRatio: 0.8, // 压缩比例,小于 80% 的文件不会被压缩 deleteOriginalAssets: false // 压缩后删除原文件 }) ], }, chainWebpack(config) { config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test // set svg-sprite-loader config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() config.when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') }) } } 这个是我在开发时对前端项目做的代理,现在我要部署到我本地的nginx上,我的nginx.conf配置如下:# 必须的全局配置 worker_processes 1; events { worker_connections 1024; } # 所有 server 块必须包含在 http 块内 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; error_log logs/error.log; sendfile on; keepalive_timeout 65; # 您的应用配置开始 server { listen 80; server_name 172.26.26.38; # 替换为您的域名或服务器IP root dist_HTGL; # 应该是目录,不是文件 # 启用 Gzip 静态文件支持 gzip_static on; gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 路由 history 模式支持 location / { index index.html; try_files $uri $uri/ /index.html; # 缓存配置 if ($request_filename ~* .*\.(?:js|css|jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$) { expires 365d; add_header Cache-Control "public, immutable"; } } # 静态资源目录 location /static/ { alias dist_HTGL/static/; expires max; add_header Cache-Control "public, immutable"; access_log off; } # API 代理配置 location ^~ /process.env.VUE_APP_BASE_API/ { proxy_pass http://218.31.203.46:8081; # 请求头处理 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_set_header X-Forwarded-Proto $scheme; # WebSocket 支持 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # 超时设置 proxy_connect_timeout 60s; proxy_read_timeout 600s; proxy_send_timeout 600s; } # 禁止访问敏感文件 location ~ /\.(env|git) { deny all; return 403; } # 错误页面 error_page 404 /index.html; error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } # 可选:HTTP 重定向到 HTTPS server { listen 80; server_name your-domain.com; return 301 https://$host$request_uri; } } 为什么启动后我登录请求的验证码获取不到

资源评论
用户头像
俞林鑫
2025.08.23
配置proxy_pass时的路径问题需要格外注意,以免影响资源代理的准确性。
用户头像
BellWang
2025.08.11
nginx代理转发路径处理的细节很重要,特别是"proxy_pass"后的"/"问题。
用户头像
周林深
2025.04.17
对于nginx用户来说,这篇文章提供了关键的proxy_pass配置指导。
用户头像
设计师马丁
2025.04.12
该文档深入解析了nginx中proxy_pass路径转发的常见错误和解决方案。
用户头像
断脚的鸟
2025.03.07
了解proxy_pass路径转发中的" /",有助于提升nginx配置的专业性。
weixin_38743119
  • 粉丝: 6
上传资源 快速赚钱