Nginx 配置跨越支持

jkyin 发布于2019-07-25 14:47 / 2194人阅读

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

用你最美的姿态，去「跨域」那座山。阅读原文

在日常的开放中，我们经常遇到跨域的问题，常用的处理方式都是在代码层添加 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 来解决跨越，具体配置如下：

# /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 ～_～

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40457.html

大话javascript 5期：跨域

摘要：同源策略所谓同源是指协议，域名，端口均相同。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的...

jzzlee 2019-08-23 16:42 评论0 收藏0
Rancher 开源私有云（Docker 容器部署及管理平台）快速体验

摘要：老徐是一个开源的企业级全栈化容器部署及管理平台。为容器提供一揽子基础架构服务兼容的网络服务存储服务主机管理负载均衡防护墙让上述服务跨越公有云私有云虚拟机物理机环境运行，真正实现一键式应用部署和管理。已有超过万次下载，生产环境的应用。 showImg(https://segmentfault.com/img/remote/1460000013588742?w=40&h=40);老徐Su...

CoffeX 2019-06-28 16:22 评论0 收藏0
解决前端开发环境中的的跨域问题

摘要：二解决思路知道是客户端浏览器为了安全使用同源策略导致的，而服务端是没有这个限制的，那我们就只能通过服务端进行跨域了。哈哈，这也是为啥后端和生产环境下比较少听说跨域的问题，所以这里介绍开发环境中的几种方法。一、为什么会有跨越问题是客户端浏览器同源策略导致的，就是浏览器不允许不同源的站点相互访问。试想一下要是没有这个，那站点里的安全信息如cookie，账号/密码等是不是很容易被其它站点获...

Youngs 2019-08-02 15:21 评论0 收藏0
前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0
灵雀云CTO陈恺：从“鸿沟理论”看云原生，哪些技术能够跨越鸿沟？

摘要：早在年针对高科技行业和高科技企业生命周期的特点，提出了著名的鸿沟理论。今天我们尝试以鸿沟理论为基础来分析云原生领域颠覆性的创新技术。回过头来看，灵雀云从早期全力投入技术栈，是最早进行产品化的厂商。历史进入2019年，放眼望去，今天的整个技术大环境和生态都发生了很大的变化。在己亥猪年春节刚刚过去的早春时节，我们来梳理和展望一下整个云原生技术趋势的发展，是一件很有意义的事情，这其中有些变...

hss01248 2019-07-01 17:09 评论0 收藏0