ajax跨域访问的解决方案
今天的工作中要访问摄像机内部的一个web站点，这就涉及到jquery的ajax跨域访问的问题。我使用的是jquery1.7的版本，下面总结如下：
- 问题一：
一开始用IE调试，总是返回No Transport错误，这是因为在进行跨域访问的时候，IE8浏览器（不同的浏览器对跨域的支持不一样）不支持跨域访问，必须在ajax请求前面加上 jQuery.support.cors = true;才行。 - 问题二：跨域问题解决后，返回的xhr.statusText = "[object Error]"，并且xmlHttpReqest.readyState始终为0。
后来我更改为自己的url，可以访问，说明是跨域的问题。后来我不用jquery的ajax，用最原始的ajax在执行到open函数的时候，提示没有权限。这才知道是跨域访问没有权限的问题。
后来在项目组同事的帮助下找到了下面的解决方案：
就是通过吧url和参数发送给servlet，然后servlet再建立HttpURLConnection，把请求发送给其他的站点。当然我们的项目为了把所有发送的请求都对应一个servlet，使用的是过滤器。
first.jsp：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="IEfile/doc/css/base.css" rel="stylesheet" type="text/css" />
<link href="IEfile/doc/css/login.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="IEfile/doc/script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="IEfile/doc/script/jquery.cookie.js"></script>
<script type="text/javascript" src="IEfile/doc/script/login.js"></script>
<script type="text/javascript" src="IEfile/doc/script/common.js"></script>
<script type="text/javascript" src="IEfile/doc/script/Translator.js"></script> <script type="text/javascript">
var g_lxdLogin = null; // Login.xml
function DoLogin()
{
m_szUserPwdValue = "111";//Base64.encode("admin" + ":" + "12345");
var m_lHttp = "http://";
var m_szHostName = "localhost";
var m_lHttpPort = "8080";
var urlTest = m_lHttp + m_szHostName + ":" + m_lHttpPort + "/WebServerTest1/PSIA/Custom/SelfExt/userCheck";
alert(urlTest);
$.ajax({
type: "GET",
url: urlTest,
async: true,
timeout: 15000,
beforeSend: function(xhr) {
xhr.setRequestHeader("If-Modified-Since", "0");
xhr.setRequestHeader("Authorization", "Basic " + m_szUserPwdValue);
},
success: function(xmlDoc, textStatus, xhr)
{
alert("login success");
if("200" == xmlDoc.documentElement.getElementsByTagName('statusValue')[0].childNodes[0].nodeValue)
{
var szUrl = decodeURI(document.URL);
if(szUrl.indexOf("?page=") != -1)
{
var szPage = szUrl.substring(szUrl.indexOf("page=") + 5, szUrl.indexOf("¶ms="));
if(szPage.indexOf(".asp") == -1)
{
szPage = szPage.concat(".asp");
}
var szParam = szUrl.substring(szUrl.indexOf("¶ms=") + 8, szUrl.length);
$.cookie('page',szPage+"?"+szParam+"%1");
}
else
{
$.cookie('page',null);
} $.cookie('userInfo'+m_lHttpPort,m_szUserPwdValue==""?Base64.encode("anonymous:\177\177\177\177\177\177"):m_szUserPwdValue);
window.location.href = "main.asp";
}
else
{
if(!$('#UserName').prop("disabled")) {
$('#UserName').focus();
}
$('#UserName').val('');
$('#Password').val('');
alert(translator.translateNode(g_lxdLogin, 'LoginTips4'));
}
},
error: function(xhr, textStatus, errorThrown)
{
alert("login error = " + textStatus);
if("timeout" == textStatus)
{
alert(translator.translateNode(g_lxdLogin, 'ConnectTimeoutTips'));
}
else
{
alert(translator.translateNode(g_lxdLogin, 'NetworkErrorTips'));
}
}
});
}
</script>
</head> <body >
<input type="button" name="b" value="TestJson" onclick="DoLogin()"/>
</body> </html>
web.xml：
<!-- psia过滤器 -->
<filter>
<filter-name>psiaFilter</filter-name>
<filter-class>com.zm.servlet.psiaFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>psiaFilter</filter-name>
<url-pattern>/PSIA/*</url-pattern>
</filter-mapping> <!-- 起始页面-->
<welcome-file-list>
<welcome-file>/IEfile/doc/page/first.jsp</welcome-file>
</welcome-file-list>
psiaFilter.java：
package com.zm.servlet; import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLConnection; import javax.servlet.*;
import javax.servlet.http.*; public class psiaFilter implements javax.servlet.Filter { public void destroy() {
} public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException { HttpServletRequest req = (HttpServletRequest)(request);
String uri = req.getRequestURI();
uri = uri.substring(15);
String Auth = req.getHeader("Authorization");
String method = req.getMethod();
HttpServletResponse res = (HttpServletResponse)(response); //((HttpServletResponse)(response)).sendError(700, "psiaFilter" + uri + Auth); String url= "http://172.16.8.178" + uri;
URL theURL = new URL(url);
HttpURLConnection urlConnection = (HttpURLConnection)theURL.openConnection(); urlConnection.setReadTimeout(11);
urlConnection.setRequestMethod(method);
urlConnection.setRequestProperty("If-Modified-Since", "0");
urlConnection.setRequestProperty("Authorization", Auth);
urlConnection.connect(); PrintWriter out = res.getWriter();
//out.println(url); InputStream in = urlConnection.getInputStream();
int c;
while((c = in.read()) != -1)
out.write(c);
System.out.println(out.toString());
//chain.doFilter(request, response);
} public void init(FilterConfig arg0) throws ServletException {
} }
ajax跨域访问的解决方案的更多相关文章
- ajax 跨域访问的解决方案
ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...
- Ajax跨域问题及解决方案 asp.net core 系列之允许跨越访问(Enable Cross-Origin Requests:CORS) c#中的Cache缓存技术 C#中的Cookie C#串口扫描枪的简单实现 c#Socket服务器与客户端的开发(2)
Ajax跨域问题及解决方案 目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
- ajax跨域访问总结
1，jsonp的使用 就是script引用别的站点js,利用回调把内容传给这个js。 a需要引入b,在页面上引入b的js,里面有b的函数，在a中执行，就能拿到json了。 程序B中test.js的代码 ...
- PHP Ajax 跨域问题最佳解决方案 【摘自菜鸟教程】
PHP Ajax 跨域问题最佳解决方案 分类 编程技术 http://www.runoob.com/w3cnote/php-ajax-cross-border.html 本文通过设置Access-Co ...
- ajax跨域访问http服务--jsonp
在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...
- Ajax跨域访问解决办法
方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...
- Hbuilder编辑App时，ajax跨域访问失败问题
今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...
随机推荐
- Js中的变量
1.什么是变量? 在JavaScript中,一种可变的量就称为变量.变量是用来临时存储数据的容器.变量是存在内存中. 2.定义变量 使用var关键字来声明变量 如下图: 3.变量名的命名规则 变量名可 ...
- Ubuntu 设定壁纸自动切换的shell脚本
升级到Ubuntu14.04后,感觉bug的确比12.04少多了.顶部任务栏支持半透明效果,所以整个桌面也看上去漂亮了很多.这样的桌面也是值得瞎捣鼓一下的,想到换壁纸,但是没找到设定动态更换壁纸的选项 ...
- 动态linq表达式新方法，Dynamic LINQ Extension Method
Remember those old posts on Dynamic LINQ? You are probably aware that Microsoft has made its impleme ...
- 第一章 搭建Qt开发环境
第一章 搭建Qt开发环境 1.到http://download.qt-project.org/archive/上下载Qt的源码包.我下载的是qt-everywhere-opensource-src-4 ...
- IE下不支持option的onclick事件
<select> <option onclick="test('www.hao123.com')"value="www.hao123.com" ...
- 使用Dreamweaver批量删除PHP项目中的单行注释和多行注释
1.删除单行注释 打开Dreamweaver的查找工具,选择正则替换如图: 里面的//.*是正则匹配单行注释的表达式 2.删除多行注释 同样用正则查找匹配,直接上图咯: 其中正则表达式为/\*[ ...
- 做了codility网站上一题：CountBoundedSlices
在写上一随笔之前,在Codility网站上还做了一个道题(非Demo题):CountBoundedSlices,得了60分(害臊呀).今天又重新做了一下这个算法,性能提高了不少,但由于此题不是Demo ...
- Spark Streaming揭秘 Day34 解析UI监听模式
Spark Streaming揭秘 Day34 解析UI监听模式 今天分享下SparkStreaming中的UI部分,和所有的UI系统一样,SparkStreaming中的UI系统使用的是监听器模式. ...
- linux crontab 命令
Linux 系统提供了使用者控制计划任务的命令 :crontab 命令. 一.crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划 ...
- 【转】用perl写的单位电脑信息采集程序
perl,后来我又改过了增加了一些交互和数据库检测的功能.主要用于收集ip.mac.姓名.房间,后来又加入了维修记录的功能.服务器端接受数据并存入数据库中. 代码如下: 主要用于收集ip.mac.姓名 ...