跨域请求数据

同域：协议, 域名, 端口号 完全一致, 是同域.

协议: http, https

域名: 一级域名, 二级域名, 三级域名

端口号: 80(http), 443(https)

https://www.oa.ranyihang.com:8080

https://www.oa.ranyihang.com:8081

https://www.ranyihang.com:8080

http://www.oa.ranyihang.com:8080

原生JS解决跨域问题有三种方式：Jsonp，postMessage，CORS 前端：Jsonp，proxy 后端：CORS

jsonp跨域

前端发送请求 后端配合回调函数 好处：

1. javascript 兼容性比较好

2. 不需要服务器支持，直接在本地运行

缺点：

1. 它只支持GET请求而不支持POST等其它类型的HTTP请求

2. 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

3. jsonp在调用失败的时候不会返回各种HTTP状态码。

4. 安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的

jsonp请求

前端

<input type="text"> <button>点击</button>
var btn = document.querySelector('button');
btn.onclick = function(){
    var val = document.querySelector('input').value;
    // 1. 创建script标签
    var scriptM = document.createElement('script');
    // 2. 添加src属性
    scriptM.src = `http://suggest.taobao.com/sug?code=utf-8&q=${val}&callback=success`;
    // 3. 添加到body标签中
    document.body.appendChild(scriptM);
}

function success(data){
    console.log(data.result
    ); 
}

后端

$val = $_GET['cb'];
$data = '{
    "code":1,
    "msg":"ok",
    "data":[{
        "uname":"jack",
        "class":"java"
    },{
        "uname":"rose",
        "class":"ui"
    },{
        "uname":"bob",
        "class":"鸿蒙"
    },{
        "uname":"张三",
        "class":"java"
    }]
}';
echo $val."(".$data.")"; // abc();

CORS实现跨域请求

php页面配置请求内容

header('Access-Control-Allow-Origin:http://www.abc.com'); // 允许一个访问 header('Access-Control-Allow-Origin:*'); // 允许所有访问

echo '您已经访问成功';

发送ajax请求

<input type="submit" id="inp"/>
<script>
var oInp=document.querySelector('#inp');
addEvent(oInp,'click',getMsg);
function getMsg(){
    url='http://192.168.64.2/1.6/2.getCors.php';
    ajaxPostAsyn(url,'',ok,error);
    function ok(res){
      console.log(res.responseText);
    }
    function error(){
      console.log('error');
    }
}
</script>

 

1. URL的编码/解码方式

JavaScript 提供四个 URL 的编码/解码方法。

• encodeURI()

• encodeURIComponent()

• decodeURI()

• decodeURIComponent()