nginx 解决跨域问题第二篇：反向代理配置命令

原创已于 2024-01-17 15:31:08 修改 · 654 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #数据库 #运维

于 2023-12-18 16:14:48 首次发布

nginx 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Nginx的proxy_set_header进行反向代理域名映射，以及VuedevServer中的跨域配置示例，重点讲解了CORS的相关设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

反向代理域名名单
用map方法做的键值对映射，举例如下

 map $uri $match {
 ~^/api/test/(.*) http://www.test.com;
}
 location /api/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $proxy_host;
    proxy_pass  $match/$1$is_args$args; //这里是填实际访问的地址（ip或者域名），我是用变量做了一个多域名的管理,可选择直接填地址
     //添加跨域请求头
    add_header 'Access-Control-Allow-Origin' $host;
    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';
   if ($request_method = 'OPTIONS') { //针对 option请求做了一个特殊的返回码
         return 204;
    }
 }

对命令参数的一些解释

proxy_set_header是nginx配置指令，用于设置向后端代理服务器转发请求时的请求头。

具体含义是设置转发请求时需要包含的请求头信息。语法为proxy_set_header header value;

常见用法包括：

1. 传递客户端真实IP地址：proxy_set_header X-Real-IP $remote_addr;
   这样设置后，代理服务器会将客户端真实的IP地址作为X-Real-IP的值传递给后端服务器。

2. 传递协议版本信息：proxy_set_header X-Forwarded-Proto $scheme;
   这样设置后，代理服务器会将协议版本信息（http或https）作为X-Forwarded-Proto的值传递给后端服务器。

3. 传递客户端来源信息：proxy_set_header Referer $http_referer;
   这样设置后，代理服务器会将客户端的来源信息作为Referer的值传递给后端服务器。
4.  proxy_set_header       Host $http_host （$http_host代理服务器本身IP）
通过proxy_set_header配置可以控制转发请求时所带的请求头信息，从而实现更灵活的代理转发功能。

基础的反向代理配置命令

 location /test/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $proxy_host;
    proxy_pass  https://www.test.com/;
    add_header 'Access-Control-Allow-Origin' $host;
    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';
   if ($request_method = 'OPTIONS') {
         return 204;
    }
  }

vue本地通过反向代理解决跨域
devServer: {
host: “0.0.0.0”,
port: 3000,
hot: true,
proxy: {
“/api”: {
target: http://www.test.com/,
changeOrigin: true, //是否支持跨域
pathRewrite: { “^/api”: “” },//重写路径
secure: false // 如果是https接口，需要配置这个参数,
}
}
},