实现跨域访问需要的条件

来源：互联网发布：上海儿童编程编辑：程序博客网时间：2024/04/29 19:39

1.设置同源

需要服务器允许，存在安全隐患；

如下所示:

前台:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>ajax请求</button>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
url:"http://192.168.31.6:8080/Ajax/ajax.do",
type:"get",
data:{
id:123
},
dateType:"json",
contentType:"application/x-www-form-urlencoded",
timeout:4000,
beforeSend:function(){
alert("准备请求");
},
success:function(data){
console.log(data);
},
error:function(xhr){
alert('失败');
console.log(xhr);
},
complete:function(){
alert("请求完成");
}
});
});
});
</script>
</body>
</html>

后台：

package action;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class Jsonp extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
//允许同源
/*resp.setHeader("Access-Control-Allow-Origin","*");
resp.setHeader("Access-Control-Allow-Methods","GET,POST");*/
PrintWriter out=resp.getWriter();
JSONObject resultObject=new JSONObject();
JSONArray arr=new JSONArray();
// String cb=req.getParameter("callback");
//System.out.println(cb);
arr.add("a");
arr.add("b");
arr.add("c");
resultObject.put("word",arr);
String id=req.getParameter("id");
System.out.println(id+"aaaa");
out.write(resultObject.toString());
out.flush();
out.close();
}
}

当你访问的时候出现如下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

意思是不允许同源，把/*resp.setHeader("Access-Control-Allow-Origin","*");
resp.setHeader("Access-Control-Allow-Methods","GET,POST");*/注释解开就能解决同源问题；

当然你也可以选择火狐浏览器因为它支持同源，或者用sublime text在服务器上运行解决同源问题；

2.用cors:

反向代理，存在安全隐患

这个方法不推荐大家使用，因为代理者完全可以知道请求者的数据,从而存在安全隐患，况且现在市面上也很少有cors;

3.jsonp:

前台:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>ajax请求</button>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
url:"http://192.168.31.6:8080/Ajax/ajax.do?id=123",
type:"get",
dataType:"jsonp",
success:function(data){
console.log(data);
},
error:function(){
alert('fail');
}
});
});
});
</script>
</body>
</html>

这样也可以解决跨域问题！！！！

阅读全文

1 0