为了账号安全,请及时绑定邮箱和手机立即绑定

在用AJAX跨域请求时遇到的问题

刚刚接触ajax就遇到一个词--跨域。


在我百度了各种资料以后总结了一句话:“只要不是在一个协议、域、名端口下,都属于跨域(127.0.0.1本地也属于跨域)”。


在做ajax请求的时候,请求不到并且浏览器会报错,错误如下:


XMLHttpRequest cannot load http://xxxxxxNo 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxxxx' is therefore not allowed access.


我在查阅跨域的资料之后,学了两种解决跨域问题的方法。


一、设置header头运行ajax跨域


这步前端不需要做什么,正常使用dataType : 'json',和post请求。


只需要后台设置允许跨域。代码如下:


// 指定允许其他域名访问
httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
// 响应类型
httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST");
// 响应头设置
httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");


Access-Control-Allow-Origin:* 表示允许任何域名跨域访问,由于设置*存在安全隐患,建议将*改成你想允许的域名。


看到一篇文章说只设置Access-Control-Allow-Origin这一个属性也可以允许跨域。


二、允许jsonp跨域


php代码


//需要获取的数据
$data = array('id'=>1, 'name'=>'ityangs');
//设置参数名
$callback = $_GET['callback'];
//输出
echo $callback.'('.json_encode($data).')';
//退出
exit;

 


输入的结果是:'users({'id': 1, 'name': 'ityangs'})'


前端代码


$.ajax({
    type : "get",//jsonp的本质是利用script标签的src属性进行跨域请求,只能用于get请求。
    url : "ajax.php",
    dataType : "jsonp",
    jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
    success : function(json){
        alert('success');
    },
    error:function(){
        alert('fail');
    }
});

由于个人见识有限,又是个渣前端,如有差错,请多多见谅,并提出修改办法,勿喷。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消