Nginx反向代理之解决跨域

使用DPlayer遇到跨域问题,最简单的解决办法,直接在在服务端Nginx配置允许跨域。

一、在Nginx配置文件中配置

http {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

二、配置解释

2.1、Access-Control-Allow-Origin

       指定允许跨域的域名,它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

2.2、Access-Control-Allow-Credentials

       是否允许携带cookie,默认情况下,cors不会携带cookie,除非这个值是true。

2.3、Access-Control-Expose-Headers

       该字段表示要暴露的头信息。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。

三、重启Nginx

//重启Nginx
nginx -s reload

四、Access-Control-Allow-origin插件

使用允许CORS的4个理由:访问控制-允许-起源

  • 使用ON | OFF开关弹出工具栏。

  • 插件处于活动状态或非活动状态时,工具栏按钮都会更改图标。

  • 一个精简的插件,具有最低的RAM和CPU使用率。

  • 适用于所有操作系统上的Firefox,Chrome和Opera浏览器。

谷歌插件地址:https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=zh-CN,能不能访问就看大家了

### 解决Nginx反向代理Tomcat时的CORS问题 #### 配置Nginx作为Tomcat的反向代理 为了使Nginx能够有效地充当Tomcat应用服务器的反向代理解决CORS资源共享问题,需按照如下方式调整Nginx配置文件。 #### 修改Nginx配置文件 在`nginx.conf`或特定站点配置文件中加入以下设置: ```nginx server { listen 80; server_name manage.leyou.com; location / { proxy_pass http://api.leyou.com/; 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'; if ($request_method = 'OPTIONS') { return 204; } # 将请求转发给后端服务 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Proto $scheme; } } ``` 上述配置通过`add_header`指令设置了必要的响应头来支持CORS[^1]。对于预检请求(即HTTP方法为OPTIONS),返回状态码204表示无内容但成功处理了客户端发来的预检请求[^5]。 #### 设置HTTP Referrer白名单 如果存在更严格的环境需求,则可以在HTTP `Referer`允许列表中添加Nginx代理服务器的实际地址,并在其后加上通配符(*)以便匹配更多子路径[^3]。 #### 实现具体业务逻辑中的代理功能 针对具体的API调用场景,在location部分定义精确的URL映射关系,例如将外部可访问的接口路由至内部网络的服务地址上[^4]。 ```nginx location /api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://localhost:8080/; } ``` 此段落展示了如何把来自前端页面对`http://manage.leyou.com/api/*`形式链接发出的数据包重定向到运行于本地8080端口上的Java Web程序实例上去处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值