菜单

Ajax不克跨域访问的化解方案

2018年11月15日 - Ajax

在其实项目中,我们常常会遇到跟一个域名下不同门类中通过Ajax相互调用数据,这样问题便来了,如何通过Ajax实现跨域呢?

图片 1

缓解方案

章介绍

即是一模一样首,引导文吧…
因为写就篇稿子时,实在怀念不发生该怎么分序。因此为贯彻跨域访问也目的,从基础知识往上勾画。最后为百度搜索智能提醒为条例,来教跨域的切实可行采用!

1.Jsonp

内容

率先,我们得明白什么是跨域,这里先了解一下url中每部分
因为百度为条例:

https://www.baidu.com:80

协议:https://
二级域名:www
一级域名:baidu.com
端口号:80

上述4独出一个差就是为跨域访问,比如你时页面在https://www.baidu.com:80,你去用Ajax请求https://tieba.baidu.com:80的数,就一定给跨域访问!

每当Ajax中,是免支持跨域访问的,所以www.baidu.com拿不到tieba.baidu.com达的数额。

那么这里就要使跨域访问的技艺,虽然Ajax不支持,但咱可以使用src这个特性上目的。

于src这个特性,相信广大口且见面想到img标签!我们都了解img标签的src如果设置也一个网络地址时,那么即使见面去行使该网络地址的图样资源。

比如src=https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png

这就是说img标签就是见面呈请该url的数返回来,其实就便已经是跨域访问了。因为若手上底页面并无在https://ss0.bdstatic.com达成,但您可成访问到了其的资源。

为此我们得以运用src这个利器,达到我们跨域访问的目的。

而使用src之前,得先了解一下Ajax利用请求回来的一呼百应数据实行回调的一模一样种植办法:

//先定义一个函数,等会利用该函数执行回调
function fun (obj) {
    console.log(obj);
}
//以下均为ajax请求,粗略看即可
var url = 'test.php';//访问当前目录的php文件
var xhr = new XMLHttpRequest();
xhr.open('get',url);
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status >=200 && xhr.status <300 || xhr.status == 304) {
            //请求成功后,拿到返回字符串并使用eval执行
            eval(xhr.responseText);
        } else {
            console.log('请求失败');
        }
    }
}

为拿到要数据,下面我们利用php简单打一个后端接口test.php

<?php
//创建一个php对象 name:kevin,age:23
$obj = array("name"=>"Kevin","age"=>"23");
//将php对象编码为json格式的字符串
$json = json_encode($obj);
//后端给客户端返回一个字符串  点为字符串拼接(相当于js中加号)
echo("fun(" . $json . ")");

求成功后eval(xhr.responseText);旋即同样句子可以一步步解说为如下代码:

  1. eval(xhr.responseText);
  2. eval(fun({“name”:”Kevin”, “age”:”23″}));
  3. fun({“name”:”Kevin”, “age”:”23″});
  4. console.log({“name”:”Kevin”, “age”:”23″})

于是控制台打印如下:

图片 2

浏览器控制台

上述我们兑现了:根据后端返回的多寡来支配具体实施有一个函数,并且应用请求回来的数量传参!

但是上述并不曾缓解我们跨域需求,因为我要的后端接口,依然以当前域!

这就是说自己刚说了,利用src,我们虽可知促成跨域。假如我们应用img标签,使该src=”test.php”。这样咱们虽以到了数量,但是img标签并无会见像eval函数一样拉咱执行多少,这样数据就是得无至用。

故此对贯彻跨域,我们有这么的急需:

  1. 有src属性
  2. 好像eval函数一样以数据实行!

满足上述条件的确实来,那即便是script标签。

平时我们在script标签内写代码,其实写的尽管是字符串,并且script标签会帮咱履行。

而且我们平常经常会用到script标签的src属性,比如引入框架时,下面为jQuery为例:
<script src="./jquery.js"></script>

实际它们就是相当给履行了如下:

<script>
    //一大堆jQ代码字符串...
</script>

从而我们得利用script标签就是实施跨域访问,这里以百度为例:

立马是百度搜索时,搜索提示的数接口

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键字&cb=方法名

按照自己搜索a,页面如下:

图片 3

百度搜索提示

这就是说自己动用接口url也会见落地方数据,如图:

图片 4

接口获取的多寡

这里方法名会根据我们的参数返回,因此而请数据成功后只要履行什么函数,那么就算为cb传该函数的方法名!

下面我为此尽量少之代码实现转 百度搜索提示

<body>
<!--搜索框-->
<input type="text" id="input">
<!--数据请求回来后,往里面添加li-->
<ul id="ul"></ul>

<script>

//回调方法,数据返回后触发
    function callBack(obj) {
        //从上面图知道关键字数组位于数据的s属性中
        var array = obj.s;
        //每次触发先清空以前数据,再添加
        ul.innerHTML = "";
        for (var i = 0; i < array.length; i++) {
            var li = document.createElement('li');
            li.innerText = array[i];
            ul.appendChild(li);
        }
    }

    //url1 和 url2 为了以后方便拼接
    var url1 = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=';
    var url2 = '&cb=';
    var ul = document.getElementById('ul');
    var input = document.getElementById('input');
    //监听输出框的键盘输入
    input.onkeyup = function () {
    //创建script标签
        var script = document.createElement('script');
        //把输入框的值和方法名作为url参数
        script.src = url1 + this.value+ url2 + callBack.name;
        //把script标签添加到body,那么就会执行代码
        document.body.appendChild(script);
        };
</script>
</body>

末段实现效益如下:

图片 5

效果

代码仅因为贯彻效益呢目的,写得死去活来简短,大家好直接拷贝到祥和电脑尝试~

Jsonp解决跨域相对简单,服务器无需另配置。具体贯彻如下:

$.ajax({
  type: 'get',
  url: 'http://xxx.com',
  data: {},
  dataType: 'jsonp',
  success: function (data) {

  },
  error: function (data) {
    mask.close();
    toast('请求失败');
  }
});

2.CORS

CORS解决方案要前端和服务端共同部署才能够实现

前端

$.ajax({
  url: 'http://xxx.com',
  type: 'post',
  xhrFields:{
    withCredentials:true
  },
  data: {},
  success: function(res){
  },
  error: function(){
    alert('服务器发生错误!');
  }
});

服务端(在先后入口文件配置)

header('Access-Control-Allow-Origin: http://xxx.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

总结

如上所述是有点编为大家介绍的Ajax实现跨域访问时解决方案,希望对大家有帮助,如果大家产生任何疑窦请叫自家留言,小编会及时恢复大家之。在此为非常感谢大家对剧本的家网站的支持!

卿可能感兴趣的文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图