87,907
社区成员
发帖
与我相关
我的任务
分享我在web页面js中不断轮询用ajax(get)请求后台服务的，老是报一下错误。但是如果web的ip和get的ip相同的话，就可以get成功。
报错如下：
XMLHttpRequest cannot load http://42.159.152.47/wx/scan/OA?rand=732&name=chrome&t=1411139667110. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
但是如果web服务和get请求的ip如果是一样的话，就能访问到。
web服务ip是localhost，get的请求ip是42.159.152.47，
我在网上查了，是因为ajax跨域访问了，但是加上<meta http-equiv="Access-Control-Allow-Origin" content="*">
但是不起作用！
还有说在ajax中改为jsonp，但是下面这段js的ajax不知道怎么改，不是我的代码。
我把页面和js贴出来，求解答~~
html：
js：
XMLHttpRequest cannot load http://42.159.152.47/wx/scan/OA?rand=732&name=chrome&t=1411139667110. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
但是如果web服务和get请求的ip如果是一样的话，就能访问到。
web服务ip是localhost，get的请求ip是42.159.152.47，
我在网上查了，是因为ajax跨域访问了，但是加上<meta http-equiv="Access-Control-Allow-Origin" content="*">
但是不起作用！
还有说在ajax中改为jsonp，但是下面这段js的ajax不知道怎么改，不是我的代码。
我把页面和js贴出来，求解答~~
html：
<html>
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>微信扫描登录</title>
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/prism.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/library.min.js"></script>
<script type="text/javascript" src="js/wx_client.js"></script>
<script type="text/javascript" src="js/wx_app.js"></script>
</head>
<body>
<div id="div_headimgs">
<img id="qr1" src="http://42.159.152.47/wx/qrcode/OA?rand=<%= ((int)(Math.random()*900)+100) %>&name=chrome" />
<!-- <img id="qr1" src="http://42.159.152.47/wx/qrcode/1?name=chrome" /> -->
<!-- <img id="#永久二维码" src="http://42.159.152.47/wx/qrcode/2?name=firefox" /> -->
</div>
</body>
</html>js：
(function() {
var $,
__slice = [].slice;
$ = jQuery;
//为`jQuery`对象扩展`scan`方法，注册或触发二维码扫描事件。
$.fn.scan = function(handler, options) {
//直接调用`scan`时，触发`jQuery`对象的`scan`事件。
if (!arguments.length) {
return this.trigger('scan');
}
//对选区内二维码逐一处理，等候其扫描事件。
return this.each(function() {
var continuous, error, expires, img, load, msg_ids, new_src, src;
msg_ids = {};
// + 缓存原始图片地址，供载入失败或失效时刷新用；
// + 变量`img`实时指向有效的图片元素；
// + 临时二维码有效时间为`1800`秒。
if (!(src = $(this).attr('src'))) {
return;
}
continuous = $(this).attr('continuous') != null;
img = this;
expires = 1800 * 1000;
//手工触发`scan`时，用自定义参数调用二维码扫描句柄。
$(this).on('scan', null, null, function() {
var args, event;
event = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return handler != null ? handler.apply(img, args) : void 0;
});
//增补当前时间生成新地址，以防浏览器缓存原图片。
new_src = function() {
var w_query;
w_query = src.indexOf('?') !== -1;
return "" + src + (w_query ? '&' : '?') + "t=" + (Date.now());
};
//二维码图片载入后：
load = function() {
//1. 显示图片；
//2. 轮询扫码结果。
var permanent, polling, refresh;
$(img).show();
(polling = (function(_this) {
return function() {
var timeout;
if (!$(img).is(':visible')) {
return;
}
timeout = setTimeout(polling, 25000);
return (function() {
var scan_url, start;
start = Date.now();
scan_url = encodeURI(decodeURI(src.replace(/(.*)(\/qrcode)($|((\?|\/).*))/i, '$1/scan$3')));
scan_url = scan_url.indexOf('?') !== -1 ? scan_url + ("&t=" + (Date.now())) : scan_url + ("?t=" + (Date.now()));
return $.ajax(scan_url).success(function(params) {
var msg_id, _ref;
clearTimeout(timeout);
$(img).addClass('scanned');
// alert("x");
_ref = params, msg_id = _ref[0], params = 2 <= _ref.length ? __slice.call(_ref, 1) : [];
if (msg_ids[msg_id]) {
return;
}
msg_ids[msg_id] = 1;
if (handler != null) {
handler.apply(img, params);
}
if (continuous) {
return polling();
}
//请求失败时，
}).fail(function(xhr, status) {
// $(img).addClass('scanned');
if (xhr.status === 404) {
return;
}
clearTimeout(timeout);
return polling();
});
})();
};
})(this))();
//二维码失效后刷新二维码：
// 1. 如果图片已经不可见，不更新图片；
// 2. 创建新的图片元素，设置图片地址；
// 3. 载入成功后，替换原图，重新计时；
// 4. 载入失败后，重复刷新二维码流程。
if (permanent = src.match(/\/qrcode\/\d+(\?|$)/)) {
return;
}
return setTimeout(refresh = (function(_this) {
return function() {
if (!$(img).is(':visible')) {
return;
}
return $(img).clone().attr('src', new_src()).hide().appendTo(document.body).load(function() {
if (!$(img).is(':visible')) {
return;
}
img = $(this).replaceAll(img).show().get(0);
return setTimeout(refresh, expires);
}).error(function() {
$(this).remove();
return refresh();
});
};
})(this), expires);
};
error = function() {
//图片载入失败时，更新图片地址（重试）。
return $(this).attr('src', new_src());
};
//注册载入成功与失败事件。
$(this).load(load).error(error);
if (this.complete) {
//如已经载入，手动触发载入事件。
return $(this).load();
}
});
};
}).call(this);
...全文
请发表友善的回复…
发表回复
yiqiuheng 2014-09-23
- 打赏
- 举报
网上说 <% response.setHeader("Access-Control-Allow-Origin", "*"); %>这个应该加在java服务端啊。
我这个jsp是请求的页面啊。[/quote]
不是说了，被ajax请求的那个页面要加这个头，在发起ajax请求的页面加没用[/quote]
恩 ~~~
Go 旅城通票 2014-09-23
- 打赏
- 举报
网上说 <% response.setHeader("Access-Control-Allow-Origin", "*"); %>这个应该加在java服务端啊。
我这个jsp是请求的页面啊。[/quote]
不是说了，被ajax请求的那个页面要加这个头，在发起ajax请求的页面加没用
拎干的毛巾 2014-09-22
- 打赏
- 举报
<% response.setHeader("Access-Control-Allow-Origin", "*"); %>
是在服务端加，你在web客户端加是没用的。
lalac 2014-09-20
- 打赏
- 举报
你可以试试把qr code图片最为iframe的src来加载，这样在这个iframe内部执行你的这段ajax请求，此时iframe和请求地址同源，然后把结果通过iframe和外部页面通过本地对象传递出来。
jsonp需要服务器端支持，实际上它就是返回的json上对了一个callback函数调用。
yiqiuheng 2014-09-20
- 打赏
- 举报
我知道不能跨域，但是我想实现这个功能。
<meta http-equiv="Access-Control-Allow-Origin" content="*">这个不起作用，不知道有没有好点的方法！
yiqiuheng 2014-09-20
- 打赏
- 举报
服务端返回来的貌似不是json，我试了一下jsonp有问题。
不知道为什么加<meta http-equiv="Access-Control-Allow-Origin" content="*">这个没用。
你说的我有点没怎么听懂，能否简单写个demo。
yiqiuheng 2014-09-20
- 打赏
- 举报
网上说 <% response.setHeader("Access-Control-Allow-Origin", "*"); %>这个应该加在java服务端啊。
我这个jsp是请求的页面啊。
yiqiuheng 2014-09-20
- 打赏
- 举报
我在jsp里面加上了，还是不行啊，同样不能跨域访问
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>微信扫描登录</title>
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/prism.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/library.min.js"></script>
<script type="text/javascript" src="js/wx_client.js"></script>
<script type="text/javascript" src="js/wx_app.js"></script>
</head>
<body>
<% response.setHeader("Access-Control-Allow-Origin", "*"); %>
<div class="login_pic">
<img id="qr1" src="http://42.159.152.47/wx/qrcode/OA?rand=<%= ((int)(Math.random()*900)+100) %>&name=chrome" />
<label class="scan"></label>
<!-- <img id="qr1" src="http://42.159.152.47/wx/qrcode/1?name=chrome" /> -->
<!-- <img id="#永久二维码" src="http://42.159.152.47/wx/qrcode/2?name=firefox" /> -->
</div>
</body>
</html>
Go 旅城通票 2014-09-20
- 打赏
- 举报
版主大神，我用的是谷歌浏览器，你的意思是我在jsp页面里面加上类似Response.AddHeader("Access-Control-Allow-Origin", "*");的设置是吧。
我试一下~
[/quote]
对的。。增加meta没用，这个不会添加到响应头里面
似梦飞花 2014-09-20
- 打赏
- 举报
ajax默认不能跨域的
yiqiuheng 2014-09-20
- 打赏
- 举报
版主大神，我用的是谷歌浏览器，你的意思是我在jsp页面里面加上类似Response.AddHeader("Access-Control-Allow-Origin", "*");的设置是吧。
我试一下~
Go 旅城通票 2014-09-20
- 打赏
- 举报
IE8药用XDOMainRequest对象，XMLHttpRequest对象不支持跨域，即使设置了Access-Control-Allow-Origin响应头
要设置响应头Access-Control-Allow-Origin为*，增加meta标签没有用
http://42.159.152.47/wx/scan/OA设置response的响应头
Response.AddHeader("Access-Control-Allow-Origin", "*");
