ajax的同源策略和JOSNP跨域

最新推荐文章于 2024-02-24 00:15:00 发布

贪吃ღ大魔王

最新推荐文章于 2024-02-24 00:15:00 发布

阅读量219

点赞数 2

分类专栏： ajax php 跨域文章标签： javascript php ajax mysql

本文链接：https://blog.csdn.net/weixin_44070254/article/details/117042834

版权

ajax 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

php

2 篇文章 0 订阅

订阅专栏

跨域

1 篇文章 0 订阅

订阅专栏

文章目录一、ajax的同源策略二、phpstudy中域名的配置三、jsonp跨域一、ajax的同源策略同源策略的基本概念1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同举例来说，这个网址http://www.example.com/dir/page.html协议是http，域名是www.exampl

摘要由CSDN通过智能技术生成

一、ajax的同源策略

同源策略的基本概念

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。
同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

协议相同
域名相同
端口相同

举例来说，这个网址http://www.example.com/dir/page.html协议是http，

域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

http://www.example.com/dir2/other.html：同源
file:///F:/phpStudy/WWW/day01/04-demo/04.html 不同源(协议不同)
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

同源策略的目的
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
同源策略的限制范围
随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。

Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求在浏览器端有跨域限制

虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域。

二、phpstudy中域名的配置

域名
就是在地址栏中输入的地址,每一个网站都有自己的域名
如 https://www.360.cn/

这些域名使用于互联网之中,在服务器上解析,所以可以在任何电脑中访问.
本地域名
在自己的电脑上利用Apache服务器,配置域名.只能在自己的电脑上访问.

实现方法

直接在phpstudy中配置即可.
在这里插入图片描述
配置vhosts.conf文件

修改hosts文件,将域名配置到本地

三、jsonp跨域

什么是跨域

域:表示不同的域名即网址不一样,如:www.baidu.com想访问www.edrc.cn就是不行的.

   现在有两个网址 第一个 192.168.0.1  第二个 192.168.0.2 那么如果要在第一个的ip下.通过ajax访问第二个域名也是不可以的.

 这是w3c组织为了安全性，做出的限制

• Ajax技术由于受到浏览器的限制(为了安全考虑)，该方法不允许跨域通信。

在两个不同域名之间互相,发ajax请求.

如何解决跨域
一个公司，有服务器a, 服务器b,如a服务器要引用b服务器上的图片

<img src=”http://www.b.com/a.jpg” />甚至这个图片的路径也可以是线上的.

因为src标签 是没有同源限制。可以借助与script标签中的src属性来实现跨域问题.

例1:编辑kuayu.js文件与kuayu.php文件,实现跨域

localhsot下面html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
      function fn(data){
          console.log(data)
      }
      //凡是通过地址栏传参的都是get方式
    </script>
    <script src="http://www.2002.com/demo.php?callback=fn"></script>
</body>
</html>

2002.com下的php文件

<?php
// echo 'I love you';
// 获取get方式的参数
$fn = $_GET['callback'];
echo  $fn.'("我来自php")';
?>

解释:

在PHP中把js中函数的名字当做字符串输出.然后浏览器进行解析之后.向下又执行.
这种方式的执行缺点是:不受人为的控制.只要页面刷新就会直接输出结果,我们不能对他进行任何的操作.

JOSNP跨域

json + 动态script

1 JSON可以传输大量数据。

2 script标签是没有同源策略限制

思路

在需要用到外部跨域，再生成 script标签.

实际操作

script标签没有同源性问题，我们可以借助script标签中的src属性来实现跨域问题。为了灵活使用跨域，一般使用动态生成SCRIPT标签来引用外部JS来实现跨域。

JSONP是指客户端用GET方式传递一个callback参数给服务端，然后在服务端返回数据时将这个callback参数作为函数名来包裹住JSON数据来返回给客户端(生成JS代码)，然后客户端，用JS动态生成script标签，并指定该script的src属性等于服务器返回的数据(服务器生成的JS代码)，这样服务器端返回的数据，就可以成为脚本的一部分。并将该这样客户端就通过callback函数来处理返回数据了。

面试题:说一说json与jsonp的一个区别?

	 答：json是一种通用的数据交换格式，主要实现数据的传输与储存。
	jsonp是一种非官方协议，主要为了解决Ajax跨域请求问题

工作中的写法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <script type="text/javascript">
       //声明一个跨域的函数
       function callback(msg){
           for(var i in msg){
              //将返回的内容直接追加到页面上
              document.getElementById("show").innerHTML += msg[i]+'<br />';
              //console.log(msg[i]);
           }
       }
    //一个生成scrip标签,引入外部文件
    window.onload=function(){
       //给按钮绑定一个点击事件
       document.getElementById("btn").onclick=function(){
        //创建一个script标签
      var script =   document.createElement("script");
         //为script指定一个url这个是跨域需要使用的
         script.src="http://www.api.com/kuayu.php?fn=callback";
        //将创建的节点追加到页面中
        document.getElementsByTagName('head')[0].appendChild(script);
       }
    }       

    </script>
   
    <body>
    <input type="button" name="" id="btn" value="点击触发跨域请求">
    <div id="show"> </div>
    </body>
</html>

<?php
    //获取方法名字
	$fn = $_GET['fn'];
	//设置我们需要返回的参数
   $arr = array(
              "name"=>'许文强',
			  'age'=>28,
			   'dream'=>'热爱国家'
			  );
//组织返回的字符串
echo $fn.'('.json_encode($arr).')';
?>

说白了，jsonp的原理就是借助了script标签 src 请求资源时, 不受同源策略的限制.
在服务端返回一个函数的调用，将数据当前调用函数的实参。
在浏览器端，需要程序要声明一个全局函数，通过形参就可以获取到服务端返回的对应的值

现在最常用的跨域

服务器代理,

服务器端设置

贪吃ღ大魔王

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
ajax的同源策略和JOSNP跨域

文章目录一、ajax的同源策略二、phpstudy中域名的配置三、jsonp跨域一、ajax的同源策略同源策略的基本概念1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同举例来说，这个网址http://www.example.com/dir/page.html协议是http，域名是www.exampl
复制链接

扫一扫