前端配置nginx解决跨域

记得有一次，在一家初创公司做项目，有个同事负责后端，而我负责前端。我们那会儿遇到了一个头疼的问题，就是跨域请求。项目上线后，用户访问时页面总是出现跨域错误提示，整个页面几乎瘫痪了。
于是，我决定用nginx来解决这个问题。我查了资料，学习了nginx的配置方法，花了几个小时配置了反向代理，把前端请求转发到后端服务。记得当时是在晚上10点多，我在公司楼下的咖啡厅里，点了一杯焦糖玛奇朵，一边喝一边敲代码。
配置完成后，我兴奋地回到办公室，测试了一下，发现页面能正常访问了。那一刻，我心里想，这就是技术的魅力吧，解决了问题，心里别提有多开心了。
等等，还有个事，我突然想到，那杯焦糖玛奇朵喝完，咖啡杯上竟然没有留下任何痕迹，这也许就像我们的工作，看似复杂，解决起来却可以不留痕迹。不过，这杯咖啡的味道，确实不错。

上周有个客人问我，怎么在前端配置nginx解决跨域问题。我给他讲了一下，这事儿还挺有意思的。
首先，跨域问题主要是因为浏览器的同源策略导致的。不过，nginx作为反向代理服务器，可以通过配置来解决这个问题。
我告诉他，首先得在nginx的配置文件中，找到你想要处理跨域的server块。然后，添加一个add_header指令，这样就可以在响应头中添加Access-Control-Allow-Origin字段。
举个例子，如果是在2023年我在北京的一家互联网公司，我的nginx配置文件可能是这样的：
nginx server { listen 80; server_name www.example.com;
location / { proxy_pass https://backend.example.com; add_header 'Access-Control-Allow-Origin' ''; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } }
这样配置后，所有通过nginx代理的请求都会包含这些CORS头部信息，从而允许跨域请求。
不过，要注意的是，Access-Control-Allow-Origin的值如果是，那么所有域名的请求都会被允许，这可能会带来安全风险。如果你只希望允许特定的域名，可以将其设置为那个特定的域名。
反正你看着办，这招儿解决跨域问题挺管用的。我还在想，有时候前端也会用到一些库或者插件来自动处理跨域问题，比如CORS Anywhere。不过，用nginx来配置跨域，在服务器端控制起来更灵活一些。