nginx配置跨域失效修复的方法示例

nginx 配置跨域不⽣效 如下配置

server { listen 80;

server_name localhost;

# 接⼝转发 location /api/ {

# 允许请求地址跨域 * 做为通配符

add_header 'Access-Control-Allow-Origin' '*'; # 设置请求⽅法跨域

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; # 设置是否允许 cookie 传输

add_header 'Access-Control-Allow-Credentials' 'true'; # 设置请求头 这⾥为什么不设置通配符 * 因为不⽀持

add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token'; # 设置反向代理

proxy_pass 127.0.0.1:8081/; } }

⽹上的 nginx 跨域配置主要是以上版本，然⽽很多都是抄⼀抄，并没有真的去实践，故写了下⽂章提醒下有需要的⼈，不要盲⽬抄，学会分析。nginx 修改如下配置后⽣效

server { listen 80;

server_name localhost;

# 接⼝转发 location /api/ {

# 允许请求地址跨域 * 做为通配符

add_header 'Access-Control-Allow-Origin' '*'; # 设置请求⽅法跨域

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; # 设置是否允许 cookie 传输

add_header 'Access-Control-Allow-Credentials' 'true'; # 设置请求头 这⾥为什么不设置通配符 * 因为不⽀持

add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';

# 设置 options 请求处理

if ( $request_method = 'OPTIONS' ) { return 200; }

# 设置反向代理

proxy_pass 127.0.0.1:8081/; } }

两者代码区别 主要就是下⾯这⾏代码

if ( $request_method = 'OPTIONS' ) { return 200;}

因为 post 请求 浏览器会发送⼀个 options 的预检请求，主要将本次的请求头 发送给服务端，若服务端允许，再发送真正的post请求，所以 f12 看到，经常 post 会发送两次请求。因为后端 java 代码没有对 options 请求做出处理，导致 options 接⼝请求的时候，报 403 forbidden , 这⾥ nginx 对 options 的请求直接返回 200，不⽤到达接⼝层，直接允许 post 响应头，即可使得上述失效配置能够⽣效附赠 ⼀个⼩知识点

proxy_pass 127.0.0.1:8081/;

针对反向代理⾥⾯这个/ 加不加的问题；

加/ 则 实际访问的是 127.0.0.1:8081/user/login;

不加 / 则实际访问的是 127.0.0.1:8081/api/user/login;

加了斜杠意味着所有的 /api 请求都会转发到根⽬录下，也就是说 /api 会被 / 替代，这个时候接⼝路径就变了，少了⼀层 /api 。⽽不加斜杠的时候呢？这代表着转发到127.0.0.1:8081的域名下， /api 的路径不会丢失

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。