使用nginx实现js跨域
一：项目环境
2个项目
1：ruby 项目，端口为3000
2：java项目，端口为8080
二：java项目
@Controller
public class ApiController
{
@Path("/api/v1/user/get_user_info")
public void processUserInfo(HttpServletRequest req, HttpServletResponse resp)throws Exception
{
resp.setContentType("application/json");
resp.setCharacterEncoding("UTF-8");
String callback = req.getParameter("callback");
PrintWriter out = resp.getWriter();
if(callback == null)
{
out.print(getUserInfo());
}
else
{
out.print(callback + "("+getUserInfo()+");");
}
out.close();
}
private String getUserInfo()
{
Map<String, String> user = new HashMap<>();
user.put("id", "1");
user.put("phone", "10086");
user.put("name", "CMCC");
user.put("web_site", "http://www.10086.cn");
Gson g = new Gson();
return g.toJson(user);
}
}部署到tomcat中去，并且启动tomcat
访问路径 http://java.hqit.com/example/api/v1/user/get_user_info
三：ruby项目(rails项目)
新建list.html放入到public目录中
<!DOCTYPE html>
<html>
<head lang="zh_CN">
<meta charset="UTF-8" />
<title>jsky</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<h1>jsky</h1>
<div style="font-size:22px;color:red;" id="box"></div>
<script type="text/javascript">
var setInfo = function(resp)
{
var html = "";
html += 'id='+resp.id;
html += '<br />phone='+resp.phone;
html += '<br />name='+resp.name;
html += '<br />web_site='+resp.web_site;
$("#box").html(html);
};
(function ($, win, doc) {
$.ajax({
type: 'GET',
url: '/example/api/v1/user/get_user_info.do',
data: 'version='+new Date().getTime(),
success: function(resp){
setInfo(resp);
},
dataType: 'json'
});
})(jQuery, window, document);
</script>
</body>
</html>
访问路径为http://ruby.hqit.com/list.html
四：nginx配置
upstream ruby {
server 127.0.0.1:3000;
}
upstream tomcat {
server 127.0.0.1:8080;
}
server {
listen 80;
server_name java.hqit.com;
location / {
proxy_pass http://tomcat;
}
}
server {
listen 80;
server_name ruby.hqit.com;
location ~ ^/example/api/v1/user/get_user_info.do {
proxy_pass http://tomcat;
proxy_set_header Host java.hqit.com; #$host;
}
location / {
proxy_pass http://ruby;
}
}
最后，在浏览器中访问
http://ruby.hqit.com/list.html
js成功取到了数据