爱代码也爱生活

吸收别人的精华,记录自己的点滴,爱好php、java、数据库、运维--如果你是房间里最聪明的人,那么你走错房间了...

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

做过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


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nuli888/article/details/51851241
个人分类: web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭