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

本文介绍了如何使用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接口,需要配置这个参数,
}
}
},

Nginx处理问题通常通过配置`http`或`server`块中的`add_header`指令以及`proxy_pass`来实现。以下是基本的步骤: 1. **Access-Control-Allow-Origin**:在响应头中添加`Access-Control-Allow-Origin`字段,指定允许的源。例如: ```nginx add_header 'Access-Control-Allow-Origin' '*'; ``` 或者: ```nginx if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type'; add_header 'Content-Length' 0; return 204; } ``` 第一个例子会允许所有来源的请求,第二个则是预检请求(CORS Preflight)的处理。 2. **允许特定请求方法**:如果你想限制特定的HTTP方法(如POST),可以在`add_header`中指定: ```nginx add_header 'Access-Control-Allow-Methods' 'GET, POST'; ``` 3. **代理设置**:如果你使用Nginx反向代理,需要确保代理设置也包含信息: ```nginx proxy_set_header 'Host' $host; proxy_set_header 'X-Real-IP' $remote_addr; proxy_set_header 'X-Forwarded-For' $proxy_add_x_forwarded_for; proxy_pass http://backend.example.com; ``` 并添加类似 `proxy_protocol on;` 来允许使用PROXY协议来解决某些场景下的问题。 4. **Location块**:针对不同的URL路径,你可以分别设置策略,每个`location`块都可以有自己的`add_header`设置。 记得保存配置并重启Nginx服务使之生效。如果有动态内容,可能还需要后端服务器配合返回正确的`Access-Control-Allow-Origin`头。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值