nginx 反向代理处理跨域问题
内容提要
文章介绍用 nginx 反向代理解决跨域：先区分正向与反向代理，再给出 webpack devServer 的 proxy 配置示例，通过 http-proxy-middleware 将 /wiki 请求转发到目标域名并重写路径；随后给出 nginx 配置，用 location /wiki/ 配合 rewrite 去掉前缀，再用 proxy_pass 转发到目标服务器，重启后即可跨域访问；最后补充正则中括号分组与 $1 的用法。
延伸解读
正向代理与反向代理的核心区别
文章用两张图直观对比了正向代理和反向代理。正向代理是客户端先经过代理服务器，实际发出请求的是代理服务器；反向代理则是“代理你的目标服务器”，即请求目标服务器的代理，由它做一些处理后再真正请求。理解这一区别有助于明白为什么反向代理能用于处理跨域：浏览器请求的是同源的代理地址，代理再转发到目标服务器。
测试环境与生产环境的配置对应关系
文章分别给出了 webpack devServer 和 nginx 的配置示例。webpack 的 proxy 依赖 http-proxy-middleware，通过 pathRewrite 将 /wiki 前缀去掉；nginx 则用 location /wiki/ 配合 rewrite 去掉前缀，再用 proxy_pass 转发到目标服务器。两者思路一致：都是把带前缀的本地请求映射到目标域名的对应路径，读者可以据此在开发和生产环境间迁移配置。
rewrite 中括号分组与 $1 的作用
文章补充了正则小知识：在 rewrite ^/wiki/(.*)$ /$1 break; 中，括号用于匹配一个分块，$1 代表第一个括号捕获的内容。作者用 JavaScript 的 replace 和 match 举例说明，不加括号虽然也能匹配字符串，但 match 结果中不会出现捕获分组，也就没有 $1。这有助于理解 nginx rewrite 替换规则中 $1 的来源。
changeOrigin 选项的未解疑问
文章提到 webpack proxy 配置中的 changeOrigin 选项，作者表示看源码似乎是改变 headers 的 host 字段，但实际测试设为 true 或 false 时请求头好像并没有变化。不过作者回忆以前某个项目必须设为 true 才能正常跨域，因此建议保险起见设为 true。这说明该选项的实际行为可能依赖具体环境，读者遇到跨域问题时可以留意这一配置。
Q&A
正向代理和反向代理有什么区别？
正向代理是客户端发出请求时先经过代理服务器，实际发出请求的是代理服务器；反向代理是代理目标服务器，对请求做一些处理后再真正请求目标服务器。
webpack devServer 如何配置代理来解决跨域？
在 devServer.proxy 中配置路径映射，例如将 '/wiki' 代理到 'http://xxx.com.cn'，并设置 pathRewrite 为 { '^/wiki': '' } 来重写路径，同时可设置 ws 和 changeOrigin 选项。
nginx 反向代理解决跨域的具体配置怎么写？
在 nginx 配置中添加 location /wiki/ 块，使用 rewrite ^/wiki/(.*)$ /$1 break; 去掉前缀，然后 proxy_pass http://xxx.com.cn; 转发到目标服务器。
nginx 配置中 rewrite 指令的语法和作用是什么？
rewrite 语法为 rewrite regex replacement [flag];，作用是将匹配 regex 的 URL 替换为 replacement。例如 rewrite ^/wiki/(.*)$ /$1 break; 会匹配 /wiki/ 后的路径并替换为 / 加捕获的内容。
正则表达式中括号分组和 $1 有什么用？
括号用于匹配一个分块，在替换或匹配时可以通过 $1 引用第一个括号捕获的内容，$2、$3 依次类推。例如在 JavaScript 中，'/wiki/2111edqd'.replace(/^\/wiki\/(.*)$/, '$1') 会返回 '2111edqd'。
配置 nginx 后如何生效？
修改 nginx 配置后，需要重启 nginx，执行命令 ./nginx -s reload 使配置生效。
