通过nginx实现跨域请求

nicercode 发布于2019-08-20 15:51 / 875人阅读

摘要：实现过程把下面的配置保存成一个文件，例如，引入到的代理配置中去。再通过访问这台机器上的地址，就能跨域访问下所有非权限控制的资源和数据了。

实现过程

把下面的配置保存成一个文件，例如：nginx_cors，引入到Nginx的代理配置中去。

if ($request_method = "OPTIONS") {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Methods" "GET, POST, PUT, PATCH, DELETE, OPTIONS";
    add_header "Access-Control-Allow-Headers" "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type";
    add_header "Access-Control-Max-Age" 1728000;
    add_header "Content-Type" "text/plain charset=UTF-8";
    add_header "Content-Length" 0;
    return 204;
}
if ($request_method = "GET") {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Methods" "GET, POST, PUT, PATCH, DELETE, 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 = "POST") {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Methods" "GET, POST, PUT, PATCH, DELETE, 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 = "PUT") {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Methods" "GET, POST, PUT, PATCH, DELETE, 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 = "PATCH") {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Methods" "GET, POST, PUT, PATCH, DELETE, 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 = "DELETE") {
    add_header "Access-Control-Allow-Origin" "*";
    add_header "Access-Control-Allow-Methods" "GET, POST, PUT, PATCH, DELETE, OPTIONS";
    add_header "Access-Control-Allow-Headers" "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type";
}

location ~* ^/ {

               proxy_pass  http://www.jd.com;

               access_log   /var/log/nginx/jd-access.log main;

               include  /etc/nginx/nginx_cors;

               max_ranges 0;

           }

再通过访问Nginx这台机器上的地址，就能跨域访问www.jd.com下所有非权限控制的资源和数据了。

云服务器 GPU云服务器跨域请求跨域请求方式 javascript跨域请求 jquery跨域请求

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

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

九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

edgardeng 2019-08-23 14:57 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

justCoding 2019-08-02 14:10 评论0 收藏0
用 nginx 代理 MailChimp API 并支持跨域

摘要：接下来我们开始编写自己的配置文件，实现指向的代理，并在请求中添加进行鉴权，同时在响应中添加跨域头，以满足跨域需求。在上面的配置文件中，用我们从创建的代替，用需要实现订阅的邮件列表的代替，而则是的后缀数字。 tl;dr nginx 既灵活方便，又功能丰富，可以帮助我们实现添加跨域头、URL 重写以及隐藏敏感信息等功能。本文介绍在使用 MailChimp进行邮件营销中遇到的一个普遍问题，分...

_ipo 2019-07-25 13:53 评论0 收藏0
用 nginx 代理 MailChimp API 并支持跨域

摘要：接下来我们开始编写自己的配置文件，实现指向的代理，并在请求中添加进行鉴权，同时在响应中添加跨域头，以满足跨域需求。在上面的配置文件中，用我们从创建的代替，用需要实现订阅的邮件列表的代替，而则是的后缀数字。 tl;dr nginx 既灵活方便，又功能丰富，可以帮助我们实现添加跨域头、URL 重写以及隐藏敏感信息等功能。本文介绍在使用 MailChimp进行邮件营销中遇到的一个普遍问题，分...

djfml 2019-06-28 15:40 评论0 收藏0
Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0