美文网首页
通过Nginx实现JSONP

通过Nginx实现JSONP

作者: 淡蓝色梦想 | 来源:发表于2018-12-29 16:31 被阅读0次

简易实现

原理是通过sub_filter实现对callback的替换,具体配置如下:
nginx配置

location /www {
        # 关键代码:使用参数中的callback替换数据文件中的特定字串
    sub_filter callback_20181229161611 $arg_callback;
    sub_filter_types application/json;
    sub_filter_once on;

    root                            html;
    index                       index.html index.htm;
}

json文件

//要被替换的字符串
callback_20181229161611(
{
    test: "ttlsa"
}
);

自适应实现

思路如下:

  1. 在location中检验请求参数是否含有callback字段:如有则rewrite到一个专门的jsonp location。
  2. 在上述的rewrite中加入originpath参数:用于记录原始路径。
  3. 在jsonp location中使用ssi为返回json包装外层callback函数。
  4. 在jsonp location中使用sub_filter替换callback函数名。
  5. 在jsonp location中使用include的virtual属性将原始的url包裹在返回json的内层。
  6. 为防止循环rewrite,在jsonp location中将原始url中的callback参数删除
location /www {
    rewrite ^(.*)\;jsessionid=(.*)$ $1 break;
    ssi                         on;
    ssi_silent_errors           on;
    ssi_types application/json;

    if ($query_string ~* %3c|%3e|%27 ){
        return 403;
    }

    if ($query_string ~ [\\\;\$\'\(\)]+){
        return 403;
    }

    if ($arg_callback) {
        rewrite ^ /jsonp/test1.json?orginalpath=$uri last;
    }

    root                        ../WebContent;
    index                       index.html index.htm;
}

location /jsonp {
    rewrite ^(.*)\;jsessionid=(.*)$ $1 break;
    ssi                         on;
    ssi_silent_errors           on;
    ssi_types application/json;

    if ($query_string ~* %3c|%3e|%27 ){
        return 403;
    }

    if ($query_string ~ [\\\;\$\'\(\)]+){
        return 403;
    }

    if ($args ~ "orginalpath=([^\&]*)\&(.*)callback=([^&]*)&?(.*)") {
        set $original_path $1;
        set $args1 $2;
        set $callbackv $3;
        set $args2 $4;

        set $virtual_path "${original_path}?${args1}${args2}";
    }

    sub_filter callback_20181229161611 $callbackv;
    sub_filter_types application/json;
    sub_filter_once on;

    root                        ../WebContent;
    index                       index.html index.htm;
}
callback_20181229161611(
<!--# include virtual="$virtual_path" -->
);

去除sub_module的支持

由于sub_module不是默认模块,所以使用ssi方案进行替换,jsonp外壳json变成如下形式:

<!--# echo var="callbackv" default="no" -->(
<!--# include virtual="$virtual_path" -->
);

相关文章

  • 通过Nginx实现JSONP

    简易实现 原理是通过sub_filter实现对callback的替换,具体配置如下:nginx配置 json文件 ...

  • JSONP理解和实现

    JSONP的格式 JSONP 不支持 POST的原因 i、因为JSONP是通过创建script实现的 ii、动态创...

  • 跨域方案

    JSONP JSON with padding 简称JSONP ,实现原理 通过动态 元素,指定src属性为一个跨...

  • JSONP的历史方案和实现原理

    1. JSONP的实现原理 JSONP是通过动态创建script实现的。请求方:frank.com 的前端程序员(...

  • 4种方法解决js跨域的实现方式

    一、JSONP 使用ajax实现跨域: 二、CORS跨域资源共享 三、Nginx反向代理 四、webpack (在...

  • lesson35-JSONP

    为什么JSONP不支持POST请求? 因为JSONP是通过动态创建 实现的 动态创建 无法发起POST请求

  • vue音乐APP03:jsonp promise化

    1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨...

  • 2018-05-23 nginx和keepalived实现IT服

    通过nginx的反向代理功能实现负载均衡,通过keepalived的故障转移功能实现nginx的高可用。 1环境 ...

  • Keepalived+Nginx实现高可用Web负载均衡

    一、需求场景: 通过之前的一篇文章:Nginx+Tomcat实现负载均衡,我们已经能通过Nginx来实现Tomca...

  • JSONP

    JSONP是什么 JSONP是通过动态创建 标签实现跨域数据访问的一种方法,JSON+Padding的缩写就是JS...

网友评论

      本文标题:通过Nginx实现JSONP

      本文链接:https://www.haomeiwen.com/subject/aakplqtx.html