nginx解决跨域

上周有个客人问我，怎么用nginx解决跨域问题啊。我一下就想起自己之前在2023年9月的时候，帮一个做电商的朋友解决过类似的问题。
当时，我是在一个叫“上海某商场”的地方，他用的系统是Spring Boot搭配Vue.js的。跨域问题主要是在前端页面调用后端API时出现的。解决办法嘛，其实很简单，就是在nginx的配置文件里加上几行代码。
我那时候是这样操作的：
nginx server { listen 80;
location /api/ { proxy_pass https://backend-server; 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'; } }
这里面的关键就是add_header指令，它用来添加HTTP响应头。其中Access-Control-Allow-Origin就是用来指定哪些域名可以访问你的API，代表所有域名都可以访问。
不过，要注意的是，如果你不希望所有域名都可以访问，就需要将替换成具体的域名。比如，只允许https://example.com访问，就可以写成：
nginx add_header 'Access-Control-Allow-Origin' 'https://example.com';
反正你看着办，这个方法挺实用的。我还在想，如果以后有更多的小伙伴遇到跨域问题，这个方法应该也能帮上忙。

跨域问题在前后端分离的开发中是挺常见的。上周有个客人问我，怎么在nginx配置中解决跨域问题啊？
说真的，这事儿简单。首先，你需要在nginx的配置文件里找到你对应的server块，然后添加两个add_header指令。这样配置：
nginx server { listen 80; server_name yourdomain.com;
location / { 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';
proxy_pass https://your_backend; ... } }
这里的Access-Control-Allow-Origin就设置了允许的域。你如果想限制具体哪个域名，可以替换成具体的域名，而不是。Access-Control-Allow-Methods和Access-Control-Allow-Headers则是允许的请求方法和请求头。
但是，要注意，这只能解决预检请求（OPTIONS请求）和简单请求，复杂请求还是得在JavaScript代码里做处理。
反正你看着办，有时候还得根据具体情况调整一下配置。我还在想这个问题，毕竟不同的项目可能有不同的需求嘛。

那天在咖啡馆，我正盯着电脑屏幕上的nginx配置文件，突然有个想法冒出来：这跨域问题，是不是就像点外卖，有时候因为地址写错了，送餐员就找不到地方？
我回忆起去年这个时候，在成都的一家小饭馆，因为地址写错，外卖小哥来回跑了三次才送到。花了近20分钟，那顿饭简直成了“跨域大作战”。
回到nginx，我试了试添加了add_header 'Access-Control-Allow-Origin' '';这行配置，结果网页上的图片和脚本立刻能正常加载了。
等等，还有个事，我突然想到，如果只是简单的跨域请求，可能这招就足够了。但如果是复杂的API请求，可能还得设置一些额外的头部信息，比如Access-Control-Allow-Methods和Access-Control-Allow-Headers。
说起来，这跨域问题，是不是得像调试代码一样，一步步来？

配置CORS头，add_header 'Access-Control-Allow-Origin' '' (or specific domain)。
这就是坑，别信默认配置。
10年前，项目因未正确设置CORS导致数据无法正常请求。
别这么干，测试环境配置要与生产环境一致。