您的位置：首页 > 运维架构 > 反向代理

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

2016-07-07 14:53 651 查看

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

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

客户端 test.html代码

<!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
$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 ，没有相关目录和文件就新建

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主配置文件添加加粗内容，即把代理文件加载进来

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航