打破边界：如何配置 Nginx 反向代理以实现跨源CORS访问请求支持

背景知识

了解跨源访问的知识可参见笔者之前博客

flutter开发web应用网络请求后台失败--记录遇到的跨源资源共享问题-CSDN博客

本文环境

笔者的服务器为CentOS7.9，配置了宝塔面板，同时搭建了Wordpress网站，希望利用Wordpress的媒体库功能存放并跨源访问图片，发现Wordpress未进行配置不支持跨源请求，遂通过修改nginx配置文件实现支持跨源请求

本文方法对于所有采用nginx作为反响代理服务器的应用均通用。

流程

首先找到nginx的配置文件，值得说明的是宝塔面板需要通过站点设置里面打开相应网站的nginx配置文件，直接打开nginx配置文件的是主配置文件，不包含站点配置文件信息

---

如果nginx配置了多个项目，请检查需要支持跨源访问的项目端口，一一查找server，查看监听对应端口的server配置信息并修改

---

然后在server的大括号内，location的大括号外，添加如下配置

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

之后，保存并且重启nginx

测试

通过curl -I url地址 命令来查看返回请求头信息

如果正确包含了添加的几个请求头信息，则证明支持跨源访问了