Nginx 简单配置本地代理转发
作为 web 前端开发人员，平时少不了遇到本地联调接口时的跨域问题，也免不了不同环境接口调试等问题，总之就是免不了会频繁的切换不同环境的接口。如果每一次切换接口都去文件里改那岂不是太麻烦，所以在前段了解了一下 nginx，为了平时开发调试方便，就在自己电脑上配置了不同环境的请求转发以及本地代理，在这里做个笔记，免得忘记。
打开 nginx 根目录，新建一个文件夹命名为customConfig，然后再在这个文件夹下新建一个custom.conf文件，接着在文件中写入一些配置，如下:
server {
# 监听本地端口
listen 9527;
# 开发环境接口请求地址
if ($host = "dev.localhost") {
set $service http://dev.ex.com:3000;
}
# 测试环境接口请求地址
if ($host = "test.localhost") {
set $service http://test.ex.com:3000;
}
# 生产环境接口请求地址
if ($host = "product.localhost") {
set $service http://product.ex.com:3000;
}
location ~/*api {
# Nginx 0.6.18版本以后,proxy_pass设置为变量时需要使用resolver指定DNS服务器地址
resolver xx.xx.xx.xx; # 这里配置你的DNS服务器地址
proxy_pass $service;
}
location / {
# 代理本地端口
proxy_pass http://127.0.0.1:8080;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}然后在nginx.conf文件最后面引入一下上面这个文件夹的配置文件，即在nginx.conf文件最后加上include customConfig/*.conf，然后重启一下 nginx，这时如果你的前端项目运行在 8080 端口，那么你如果想让本地运行的项目请求指定的服务地址，只需要通过配置的对应域名去访问项目即可。例如访问 dev.localhost:9527，就可以打开你 8080 端口运行的前端项目并且将你所有 url 包含/api的请求全都转发到http://dev.ex.com:3000，其他的以此类推。
但是需要注意的是 location 匹配/时，必须放到最后面去，避免它匹配别的代理配置。同时接口 url 也要做同一的调整，特别是匹配 url 这一块，不同的匹配方式效果也不同，具体参考官方文档或网上的资源，这里就不细说了，主要自己也还不是很熟，往后加深了解后再来补充。
接着是配置跨域，同样创建一个cors文件夹，并新建cors.conf文件，然后在文件中加入配置:
add_header 'Access-Control-Allow-Origin' '*';
# OPTIONS方法
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
# POST方法
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}
# GET方法
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}以上是一些简单的配置，有更多需求的可以自定义配置。
配置好之后，在需要使用跨域配置的地方引入文件，例如:
location ~/*api {
# Nginx 0.6.18版本以后,proxy_pass设置为变量时需要使用resolver指定DNS服务器地址
resolver xx.xx.xx.xx; # 这里配置你的DNS服务器地址
include cors/*.conf
proxy_pass $service;
}这样一来本地调试也不用担心跨域问题了，非常省事。而且配置文件可以有很多，你可以为每个项目写一份配置文件，绝对的一劳永逸。
Nginx 还是太需要学起来的，简单点的配置还不难，想要融会贯通还需要花点时间和精力，nginx 和 js 一样都是入门容易精通难的一项技术，不过网上很多资料可以学习，基本可以满足平时的开发工作了。