关于ajax跨域问题cors和jsonp解决

跨域基本概念:

同源:
        协议名:http
        地址一样(目录相同)
        端口号:默认80
        上述三个条件一样则为同源
 
        不同源: 协议、地址、端口号三者中有一个不一样

跨域:
        不同源的网站之间互相发送请求
        浏览器默认是限制了跨域访问
        虽然被限制了,但是在开发中不可避免的出现跨域访问
      

cors解决:cross origin resource sharing(要html5才支持)

主要出现在ajax的的请求行里

xhr.open('get', './data.php');//当访问当前路径时不会出现跨域问题

如果把请求路径改为以本机ip地址为首的绝对路径,如下地址:

xhr.open('get','http://192.168.1.109/php8-20/jsonp/data.php');

同样以127.0.0.1去请求路径就会出现跨域问题,如图:

跨域问题:XMLHttpRequest cannot load http://192.168.1.109/php8-20/jsonp/data.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.

错误里提示在请求的data.php文件里"No 'Access-Control-Allow-Origin' is header present on the requested resource"

也就是data.php文件出了问题,没有在文件里添加"访问控制允许同源",要求在php的header里添加('Access-Control-Allow-Origin'),如下:

     //设置允许跨域访问
    header('Access-Control-Allow-Origin:*');//后面的' * '号为通配符表示允许所有域名跨域访问
    echo 'console.log("你来了呀")';

这时服务器就可以返回数据了,如图:

jsonp解决:

Jsonp原理:
                1.利用script标签的src属性支持跨域获取资源
                2.script的src请求路径上用get请求的方式?拼接一个方法名发送到服务器
                3. 服务器接收到请求后,用get获取方法名,并且用字符串拼接
                   的方法传入一个参数返回给浏览器
                4. 浏览器把返回的数据当js解析
                用以上jsonp方法没有出现跨域问题并且服务器获取到了数据

jsonp解决主要借助了script标签src属性的方法,看下面html代码:

data.html:

<!DOCTYPE html>
<html>
        <head>
                 <title>jsonp</title>   
                 <meta charset="UTF-8" />    
                 <style></style>
        </head>
        <body>
                  <input type="button" value="跨域访问"/>
                  <script>
                          function callback(data){
                               console.log(data);
                          }
                  </script>
                  <script src="http://192.168.1.109/php8-20/jsonp/data.php?success=callback"></script>
        </body>
</html>

php代码:

data.php

<?php
    $backData = $_GET['success'];

     把数据拼接到函数名后面
     echo $backData.'({"name":"哈哈","friend":"嘿嘿"})';
?>

输出结果如下图:

jsonp按描述的方法正常的输出,也可以解决跨域问题,浏览器成功输出了传入的对象

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值