ajax 跨域的几种解决办法

发布时间：2020-12-16 01:33:54 所属栏目：百科来源：网络整理

导读：跨域这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略，即JavaScript或Cookie只能访问同域下的内容)，因为我们在日常的项目开发时会不可避免的需要进行跨域操作，所以跨域能力也算是前端工程师的基本功之一。 1. CORS解决方案原理：CORS定

跨域这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略，即JavaScript或Cookie只能访问同域下的内容)，因为我们在日常的项目开发时会不可避免的需要进行跨域操作，所以跨域能力也算是前端工程师的基本功之一。

   1. 
  CORS解决方案 
 

原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

方法：

任何域向服务端提交请求： header(" Access-Control-Allow-Origin:*");

指定域名向服务端提交请求： header(" Access-Control-Allow-Origin:www.baidu.com");

 
     允许PUT方法： 
   header("Access-Control-Allow-Methods:PUT");

 
     万能方法： 
  

    header("Access-Control-Allow-Origin:*");
    header("Access-Control-Allow-Headers:Origin,X-Requested-With,Content-Type,Accept");
    header("Access-Control-Allow-Methods:DELETE,PUT");

  跨域错误提示：Request header field Content-Type is not allowed by Access-Control-Allow-Headers
 
  

兼容：

cors在移动终端支持的不错，可以考虑在移动端全面尝试；

PC上有不兼容和没有完美支持，所以小心踩坑。

当然浏览器兼容就是个伪命题，说不准某个浏览器的某个版本就完美兼容了，说不准就有点小坑，尼玛伤不起！

2.JSONP解决方案

和大多数跨域的解决方案一样，JSONP也是我的选择，但是缺点是不支持POST请求。

前端程序：

$.ajax({
        url:"http://chen.qingclouds.cn/index.php?svc=live&cmd=list",dataType:'jsonp',data:{pageIndex:1,pageSize:20},jsonp:'callback',success:function(result) {
            for(var i in result) {
                alert(i+":"+result[i]);
            }
        },});

服务端程序：

$_GET['callback']."($result)";

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!