nginx 反向代理解决ajax跨域问题

~~写了段ajax 去请求接口数据的js ,无奈发现有跨域问题。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>index</title>

</head>
<body>
<a id='ajax'>ajax</a>
</body>
</html>

<script src="jquery-v1.10.2.js"type="text/javascript"></script>
<script type="text/javascript" >
$("#ajax").click(function(){
$.ajax({
async: false,
type: "GET",
dataType: 'json',

url: "http://139.196.178.104/ops/v1.0/stuff",
data: "",
timeout: 3000,
contentType: "application/json;utf-8",
success: function(msg) {
console.log(msg);
}
});
});
</script>

利用nginx反向代理

1.创建虚拟域名

在ajax.conf 中加一个location

location ^~/api/{
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://139.196.178.104/;
}

nginx -s reload

这样 访问 http://local.ajaxdemo.com/api/ops/v1.0/stuff 地址 和访问  http://139.196.178.104/ops/v1.0/stuff  得到的数据效果是一样 的说明 nginx 反向代理配置成功

然后修改ajax

$("#ajax").click(function(){
$.ajax({
async: false,
type: "GET",
dataType: 'json',

url: "api/ops/v1.0/stuff",
data: "",
timeout: 3000,
contentType: "application/json;utf-8",
success: function(msg) {
alert(msg);
console.log(msg);
}
});
});

便可实现抓取接口 http://139.196.178.104/ops/v1.0/stuff的数据

原文地址:https://www.cnblogs.com/kinmos/p/6829940.html