Origin null is not allowed by Access-Control-Allow-Origin.Uncaught SyntaxError: Unexpected token
在跨域问题中,这个提示基本没有作用,除了查看网上的解决方案我们还有必要进行的是模拟相应的环境。
Origin null is not allowed by Access-Control-Allow-Origin. 提示这是一个跨域访问的问题。
一般在IE浏览器下采用ajax提交不会出现该问题,有很多人提出用jsonp来实现,我是没有成功的,
最终的仍旧采用一个简单的ajax进行实现(其实我一直怀疑后台存在的问题在形象前台的兼容性):
跨域的问题困了我将近一天,最后决定进行模拟,找出前台和后台寻在的一些问题,事实证明确实找到了。
一个简单的html:
<form id="mainform">
name:<input id="name" name="name" type="text"/>
age:<input id="age" name="age" type="type"/>
<span onclick="jiance()">tijiao</span>
</form>
</body>
<script type="text/javascript">
function jiance(){
var form=$("#mainform");
$.ajax({//ajax提交方式
type:"get",
url:"http://localhost:8080/jiance/login",
data:form.serialize(),//序列化form中的所有input参数
success:function(data){
alert(data);
//alert(data.substr(11,7));
var str=eval("("+da ta+")");
alert(str.name);
//alert(str);
},
error:function(){
alert("The form submit Failed");
}
});
}如果担心出现ajax兼容性问题,可以采用以下方式提交数据,效果与ajax一样
function loadXMLDoc(url)
{
xmlhttp=null;
var form=$("#mainform");if (window.XMLHttpRequest)
{// code for IE7,Firefox,Opera,etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
var url=url+form.serialize();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
alert(xmlhttp.responseText);
}
else
{
alert("Problem retrieving XML data:" + xmlhttp.responseText);
}
}
}
这是在一个简单的静态页面上写的ajax,在页面的头上确实需要加上:
<Meta http-equiv="Access-Control-Allow-Origin" content="*">这是前台的解决兼容性的方式
整个前台代码就是这样。为了解决和模拟这个跨域的问题,我特意写了一个后台代码,最终将所有的问题都显示在了自己面前,public class ActionServlet extends HttpServlet{
public void service(HttpServletRequest req,HttpServletResponse response)
throws ServletException,IOException {
//response.setHeader("Access-Control-Allow-Origin","*");
String name=req.getParameter("name");
String age=req.getParameter("age");
Person per=new Person();
per.setAge(age);
per.setName(name);
String str="{'name':'"+name+"','age':'"+age+"'}";
PrintWriter out=response.getWriter();
if(name.equals("name")&&age.equals("age")){
System.out.println(per.toString());
out.write(str);
}
}
}这是一个简单的servlet服务器代码,这里重点的是添加了response.setHeader("Access-Control-Allow-Origin","*");
如果没有这句在IE没有任何问题,在非IE浏览器下会出现跨域的问题。而且其他浏览器的ajax中服务端callback回掉的data值为null,
这样让我们很难判断问题所在。怀疑浏览器兼容问题时必要的,但是大多数浏览器并不像IE这样简单的设置就能顺利通过。
这里只是用实际行动讲述如何解决跨域的问题。
web.xml简述:小注:跨域问题在很大程度上是后台开发者不了解浏览器兼容性造成的,这对我们这些人来说唯一的启示就是怀疑后台开发人员代码 中存在问题的唯一方式就是自己模拟出一个相对应的东西。这是我今天解决的第二个关于浏览器兼容性的问题。<servlet> <servlet-name>ServletTest</servlet-name> <servlet-class>trs.pojo.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ServletTest</servlet-name> <url-pattern>/login</url-pattern> </servlet-mapping>