ajax完美解决跨域问题（jsonp、nginx反向代理）

最新推荐文章于 2022-10-19 18:16:03 发布

hongmingover

最新推荐文章于 2022-10-19 18:16:03 发布

阅读量1.9k

点赞数

ajax完美解决跨域问题（jsonp、nginx反向代理）

做过web前端人都知道，经常会有ajax跨域问题，下面列举我经常使用的解决办法

第一种：使用jsonp，jQuery的ajax方法支持jsonp，但是最大的缺点就是只支持get方式，而且服务端也要修改

客户端 test.html代码

[html]view plaincopy 
    
 <!DOCTYPE html>  
 <html>  
 <head>  
     <title>工作端</title>  
     <meta name="viewport" content="width=device-width,initial-scale=1.0">  
     <meta charset="utf-8">  
     <script src="jquery-1.10.2.min.js"></script>  
     <style>  
     </style>  
 </head>  
   
 <body>  
 <input type="button" value="测试" id="demo">  
 <div id="result">  
   
 </div>  
 <script>  
 $(document).ready(function() {  
     var cache = {};  
     $("#demo").click(function(){  
         $.ajax({  
             type : "get",   
             async:false,  
             data:{"name":"test001","age":"100"},  
             url : "http://192.168.10.111/server.php", //跨域请求的URL  
             dataType : "jsonp",  
             //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)  
             jsonp: "callback",  
             //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名  
             jsonpCallback:"success_jsonpCallback",  
                 //成功获取跨域服务器上的json数据后,会动态执行这个callback函数  
             success : function(json){   
                 alert(json,name);  
             }  
         });  
     });  
 })  
 </script>  
 </body>  
 </html>  

server.php代码

[php]view plaincopy 
    
 <?php  
 $arr['id']=100;  
 $arr['name']="小网";  
 $data[]=$arr;  
 $arr['id']=200;  
 $arr['name']="阿里";  
 $data[]=$arr;  
 $data=json_encode($data);  
 $callback = $_GET['jsoncallback'];  
 echo $callback."(" .$data.")";  

第二种：nginx反向代理，我的nginx版本nginx-1.10.0

首先在 conf\apiserver-reverse-proxy-conf\bingli\main.conf ，没有相关目录和文件就新建

[html]view plaincopy 
    
 location ~* ^/uc/.*{  
     proxy_set_header Host $host;  
     proxy_set_header X-Real-Ip $remote_addr;  
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
     proxy_pass http://192.168.10.111:8080;  
 }  

然后在nginx主配置文件添加加粗内容，即把代理文件加载进来

[html]view plaincopy 
    
 location / {  
             root   html;  
             index  index.html index.htm;  
         }  
 include apiserver-reverse-proxy-conf/bingli/main.conf;  

重启nginx，之后ajax发请求到

http://localhost/uc/aa
http://localhost/uc/bb?token=xxxx
都会被转发到
http://192.168.10.111:8080/uc/aa
http://192.168.10.111:8080/uc/bb?token=xxxx

附上自己的bug修复方案

nginx

location /v2/wintelapi/api/agent/free {
16 #root /usr/work/tool/webroot/;
17 #rewrite ^/(.*)$ /_upload/index.php break;
18 proxy_set_header Host m.icsoc.net;
19 proxy_set_header X-Real-Ip $remote_addr;
20 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
21 proxy_pass http://182.92.31.130;
22 }

$('#btn_consultinner').click(function () {
    $.ajax({
        //url: wincall.opts.wintelapi_url + '/v2/wintelapi/api/agent/free',
        url:'/v2/wintelapi/api/agent/free',
        data: {vcc_code: wincall.opts.vcc_code},
        dataType: 'jsonp',
        timeout: 5000,
        async: false,
        jsonp: 'jsonpcallback',
        success: function (response) {
            var resCode = response.code || '';
            if (resCode == 200) {
                var resData = response.data || {};
                var $tbody = $('#tbody');
                $.each(resData, function (index, value) {
                    $tbody.empty();
                    if (value.ag_num != wincall.loginInfo.agentNum) {
                        var $tr = $('<tr><td>' + value.ag_id + '</td><td>' + value.ag_num + '</td><td>' + value.ag_name + '</td><td>' + value.pho_num + '</td></tr>');
                        $tbody.append($tr);
                        $tr.on('click', function () {
                            wincall.fn_consultinner(value.ag_id);
                            $('#free-agent-modal').modal('hide');
                        });
                    }
                });
            } else {
                wincall.log(response);
            }
        }
    });
    $('#free-agent-modal').modal({});
});