米狗

  • kubernets
  • docker
  • AWS
  • linux
  • nginx
Kratos
  1. 首页
  2. 中间件
  3. nginx
  4. 正文

Nginx 配置跨越支持

2022年8月28日 510点热度 0人点赞 0条评论

Nginx 配置跨越支持

用你最美的姿态,去「跨域」那座山。

在日常的开放中,我们经常遇到跨域的问题,常用的处理方式都是在代码层添加 cors 支持,但若你有 Nginx 配置权限,在 Nginx 上处理跨域将使得程序异常简单和高效。

代理

假设我们的前端域名为 example.com,API 服务架设在 api.example.com 域名下,那我们可以通过代理的形式来配置跨越请求,具体的配置为:

      • 在 Nginx 的 example.com 虚拟主机文件中配置如下的代理
      • 配置成功重启后,前端即可用 example.com/api 的方式和 API 交互

# /etc/nginx/sites-enabled/example.com.conf

location /api/ {
proxy_pass http://api.example.com/;
}

这种方式的原理是将 API 提供的服务,代理到前端域名的二级目录下,从而避免跨域。

Response Header

当然由于很多情况下我们不想将服务代理到前端域名二级目下,那可以通过在 Http Response 中添加 Header 来解决跨越,具体配置如下:

 

#允许跨域请求的域,* 代表所有
add_header 'Access-Control-Allow-Origin' *;
#允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的方法,比如 GET/POST/PUT/DELETE
add_header 'Access-Control-Allow-Methods' *;
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;

 

# /etc/nginx/snippets/cors.conf;

if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Content-Disposition' always;
add_header 'Access-Control-Max-Age' 1728000 always;

add_header 'Content-Length' 0;
add_header 'Content-Type' 'text/plain; charset=utf-8';

return 204;
}

if ($request_method ~* "(GET|POST|DELETE|PUT)") {
add_header 'Access-Control-Allow-Origin' '*' always;
}

关于何时会发起 OPTIONS 请求及 OPTIONS 请求的内容,可参考阮老师的这篇文章—— 跨域资源共享 CORS 详解

然后在 API 服务域名下添加 CORS 支持即可

# /etc/nginx/sites-enabled/api.example.com.conf

location / {
try_files $uri $uri/ /index.php?$query_string;
}

location ~ \.php$ {
// 引入 cors 配置
include snippets/cors.conf;

fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
...
...
}

注意 include snippets/cors.conf 这段代码的位置,若直接放在 location 中,是不起作用的,如下所示:

location / {
include snippets/cors.conf;

try_files $uri $uri/ /index.php?$query_string;
}

这是因为下面的 try_files 将请求 Forward 到了 location ~ \.php$ 这个 block 下,在此之前添加的 add_header 命令是无效的。

enjoy ~_~

标签: 暂无
最后更新:2022年8月29日

duhongjun

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

归档

  • 2024 年 10 月
  • 2024 年 4 月
  • 2024 年 3 月
  • 2024 年 2 月
  • 2024 年 1 月
  • 2023 年 11 月
  • 2023 年 4 月
  • 2023 年 2 月
  • 2023 年 1 月
  • 2022 年 11 月
  • 2022 年 10 月
  • 2022 年 9 月
  • 2022 年 8 月
  • 2021 年 12 月
  • 2021 年 11 月
  • 2021 年 8 月
  • 2021 年 7 月
  • 2021 年 6 月
  • 2021 年 2 月
  • 2020 年 1 月
  • 2019 年 12 月
  • 2019 年 11 月
  • 2019 年 10 月
  • 2019 年 9 月
  • 2019 年 8 月

分类目录

  • AWS
  • docker
  • elasticsearch
  • Jenkins
  • kubernets
  • linux
  • mysql
  • nginx
  • Oracle
  • php
  • redis
  • zabbix
  • 个人
  • 中间件
  • 公有云
  • 大数据
  • 安全工具
  • 微软
  • 操作系统
  • 数据库
  • 未分类
  • 监控
  • 科技
  • 网络技术
  • 资讯
  • 阿里云

COPYRIGHT © 2024 米狗. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

沪ICP备2021019346号-1