实现跨域访问需要的条件

最新推荐文章于 2022-10-28 15:58:35 发布

乘风破浪的苦行僧

最新推荐文章于 2022-10-28 15:58:35 发布

阅读量657

点赞数 1

分类专栏： jquery中ajax的跨域问题文章标签：实现跨域访问需要的条件

本文链接：https://blog.csdn.net/G160601/article/details/78312566

版权

jquery中ajax的跨域问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
1
评论
实现跨域访问需要的条件

1.设置同源需要服务器允许，存在安全隐患；如下所示: 前台: Documentajax请求$(document).ready(function(){$('button').click(function(){$.ajax({url:"http://192.168.31.6:8080/Ajax/ajax.do",t
复制链接

扫一扫