欢迎来到知了堂!
联系电话:知了堂-电话号码 028-62016472

在用AJAX跨域请求时浏览器报错解决办法-知了堂

在用AJAX跨域请求时浏览器报错解决办法

  AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面

  由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求,比如在www.zhiliaotang.com下去请求edu.zhiliaotang.com的数据,都是不行的。

  总结了一句话:“只要不是在一个协议、域、名端口下,都属于跨域(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.

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

在用AJAX跨域请求时浏览器报错解决办法

 

  一、设置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');

  }

  });

       版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习web前端时使用