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

最新推荐文章于 2024-04-12 20:22:09 发布

技术成长ing

最新推荐文章于 2024-04-12 20:22:09 发布

阅读量3.7k

点赞数

分类专栏： ajax 文章标签： No 'Access-Control-Allow-Origi ajax跨域问题已解决 cors解决跨域问题 jsonp处理跨域问题 XMLHttpRequest cannot load htt

本文链接：https://blog.csdn.net/Jackson23333/article/details/81915116

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

跨域基本概念：

同源:
        协议名: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按描述的方法正常的输出，也可以解决跨域问题，浏览器成功输出了传入的对象

技术成长ing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于ajax跨域问题cors和jsonp解决

跨域基本概念：同源: 协议名:http 地址一样(目录相同) 端口号:默认80 上述三个条件一样则为同源不同源: 协议、地址、端口号三者中有一个不一样跨域: 不同源的网站之间互相发送请求浏览器默认是限制了跨域访问虽然被限制了,但是在开发中不可避免的出现跨...
复制链接

扫一扫