使用nginx实现js跨域

待我称王封你为后i 2022-08-06 13:16 118阅读 0赞

一：项目环境

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