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

时间: 2024-11-02 05:04:25

使用nginx实现js跨域的相关文章

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

利用JS跨域做一个简单的页面访问统计系统

其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们需要自己来设计统计系统.由于前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比较简单. 几个基本统计需求: 1.统计web每个页面用户访问量 2.统计用户访问者的和IP地址信息 3.页面之间的跳转情况 4.访问高峰时间段 服务器结构: 数据库表设计: 以上只是我简单列

三种方法实现js跨域访问

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

js跨域请求方式 ---- JSONP原理解析

这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而

js跨域访问

客户端 HTML 1 <div id="oid"></div> 2 <script type="text/javascript"> 3 //获取货号 4 $.ajax({ 5 6 url: "http://192.168.1.191/H.ashx", 7 type: "GET", 8 dataType: 'jsonp', 9 //jsonp的值自定义,如果使用jsoncallback,那么服

JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

问卷项目--js跨域

项目中因为要把问卷投放到第三方,并且对方要收集统计数据,因此在调用对方接口的时候就会存在跨域的问题. 1. 什么叫js跨域 浏览器不允许javascript跨域请求其他域名下的内容.端口号不同,主域相同子域不同,协议不同,不同域名等等情况 下面表格里的a.js是无法获取b.js的内容的. 情况 举例 端口号不同 http://www.baidu.com/a.js   vs.  http://www.baidu.com:8080/b.js 主域相同子域不同 http://www.baidu.com

解决js跨域问题的思路及实践

js跨域问题是比较头疼的问题,因为最近的项目都是基于webview这个组件来写的.我加载本地的html文件,文件中有些连接去请求服务器,这时候就会报错,因为安全服务器拒绝js去请求.还有一种问题就是我自己在本地搭建的web服务器(Tomcat,node.js构建的服务器).去请求另外远程服务器的数据,也会发生上述问题.因此很多时候开发的时候,不好测试.今天碰到了一种好方法.特此记录一下. 首先我搭建了web服务器,tomcat和node.js构建的两种web服务器. 思路就是我们在hosts文件