【同源跨域】---解决ajax跨域问题的三种解决方案

悠悠~飘

已于 2022-06-27 10:07:37 修改

阅读量1.9k

点赞数 1

分类专栏： Ajax 文章标签：前端 javascript

于 2022-06-22 10:45:08 首次发布

本文链接：https://blog.csdn.net/weixin_48813932/article/details/125404364

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.浏览器同源政策

“同源”：协议相同、域名相同、端口相同。

“同源的目的” ：只有在一个服务器上的文件才能互相交互，多个服务器之间的文件禁止

1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

http://www.example.com/dir2/other.html	同源
http://example.com/dir/other.html	不同源（域名不同）
http://v2.www.example.com/dir/other.html	不同源（域名不同）
http://www.example.com:81/dir/other.html	不同源（端口不同）

目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制：随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制：

(1)Cookie、LocalStorage 和 IndexDB 无法读取。

(2)DOM 无法获得。

(3)AJAX 请求不能发送。

凡事都有利有弊，尽管限制是有必要的，但在有些情况下合理的用途也会因“同源政策”而受到影响。因此我们将要为大家介绍的一些规避上述限制的手段，就是【跨域】的由来。

二 Ajax跨域

Ajax跨域指的是将Ajax请求进行跨域处理，而不是说在Ajax中提供了跨域的方法。同源政策中明确规定Ajax请求只能发给同源的网址，否则就会发生跨域报错。除了设置代理之外页面中有三种常见的解决跨域的手段，

①设置服务端响应头

当进行复杂请求时需要对服务端进行设置，以PHP为例：

header('Access-Control-Allow-Origin: *'); //表示所有网络请求均可访问

②代理

③JSONP

2.3 JSONP跨域（get）

JSONP是服务器与客户端跨源通信的最常用方法。最大特点就是简单适用，老式浏览器全部支持，对服务器改造非常小。

本质：实际上利用了script标签引入js文件，并解析执行的原理。

使用方法：

①、在html中插入script标签，并利用script标签发起跨源请求

②、在服务器对应php文件中通过拼接字符串，模拟函数调用。并将要返回数据通过回调函数参数返回。

③、在html页面中，显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。

优点：

(1)由于使用script脚本作为请求，因此实际上请求和传统的引入js脚本没有任何区别。 (2)而在返回的数据中我们也尽量模拟出了js调用函数的语法，因此只要在页面中声明了回调函数就会自动被调用。 (3)再者作为参数的【服务器端】的JSON数据，在js中是被直接识别为对象，因此在回调函数中也避免了使用JSON.parse的步骤。

实例：

html文件：


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div id="mydiv">
            <button id="btn">点击</button>
        </div>
        <script>
            function fun() {
            console.log("123")
        }
        </script>
        <script>
            window.onload = function() {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function() {
                var jsonp = document.createElement("script");
                //直接被浏览器识别为函数处理，这里的url对应后端接口
                jsonp.src = "http://localhost:3000/php/01.php?callback=handleResponse";
                document.body.appendChild(jsonp);
            };
        };
        </script>
    </body>

    </html>

server.js

const url = require("url");
const queryString = require("querystring");
const fs = require("fs");
const http = require("http");
const path = require("path");
const html = path.resolve(__dirname, "./03.html"); //这里直接解析html文件 做到静态私服
const server = http.createServer(async(request, response) => {

    const urlObj = url.parse(request.url);
    if (url) {
        fs.readFile(html, (err, file) => {
            if (err) {
                response.end("404");
            } else {
                response.end(file);
            }
        });
    }
});
//设置端口号，并监听
server.listen(5000, () => {
    console.log("创建服务器")
});

用node ./server.js 启动一个端口号为:5000的服务器。

然后我再用xmapp 开了一个后端，端口号为3000。（达到端口号不同，造成跨域问题）

在php文件夹中建了一个01.php

<?php
$aaa = $_REQUEST["callback"];
$array = array("msg" => "ok");
echo $aaa."(".json_encode($array).")"; //返回array这个变量
?>

结果

{msg:"ok"} 是后端返回的数据

‘132’ 是前端函数fn打印的结果

三、为什么JSONP不是真正的AJAX（面试点）

JSONP是通过Script中的SRC属性携带参数传递数据，跟XMLHttpRequest对象没有任何关系。

实质不同：

ajax的核心是通过xmlHttpRequest获取非本页内容

jsonp的核心是动态添加script标签调用服务器提供的js脚本

jsonp只支持get请求，ajax支持get和post请求

四、AJAX优缺点（面试点）

4.1 优点：

1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。

2.使用异步的方式与服务器通信，不需要中断操作。

3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。

4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

4.2 缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

悠悠~飘

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【同源跨域】---解决ajax跨域问题的三种解决方案

“同源”：协议相同、域名相同、端口相同。“同源的目的” ：只有在一个服务器上的文件才能互相交互，多个服务器之间的文件禁止1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。举例来说，这个网址，协议是，域名是，端口是（默认端口可以省略）。它的同源情况如下。目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。限制：随着互联
复制链接

扫一扫

专栏目录