首页 > 代码库 > 使用nginx实现js跨域

使用nginx实现js跨域

2024-11-19 05:07:39   205人阅读

一：项目环境

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成功取到了数据

使用nginx实现js跨域


联系
我们