跨域详解与解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54093765/article/details/118371091

跨域

跨域:非同源策略请求

同源策略请求 ajax(也可以跨域)

跨域传输

2013年以前,没有真正的web前端工程师,前后端不分离,前端只需要写基础的html和css文件,发给后台,后台服务器去渲染数据,所以此时不存在跨域问题,因为前端和后端都在一起.

前端发展,异步无刷新操作–>ajax

前端写前端代码.后端写后端代码.最终是部署在同一个服务器上面:同源策略,但是在开发的时候双方都要调试,所以前端统一去使用后端编辑器,麻烦,噩梦,还要会后端

资源合理运用:

服务器拆分:

web服务器:静态资源 kbs.qq.com

data服务器:业务逻辑和数据分析 api.data.qq.com

图片服务器:img

模拟的时候无所谓,最后都会走同源,但是做性能优化服务器拆分

3.1、什么是跨域

在这里插入图片描述

如果出现上述的话，那说明跨域了

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

3.2、什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

如果两个url的协议，域名和端口相同，则表示它们是同源，相反，只要协议域名端口有一个不相同，那就是跨域了

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

3.3、常见跨域场景

URL                                      说明                    是否存在跨域
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js

 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

3.4、跨域解决方案

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

跨域解决方案

1、通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

script img link iframe ==>不存在跨域请求的限制

1.）html：

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
</head>
<body>
    <div class='main'>111</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./js/jsonp.js"></script>
    <script>
    </script>
</body>

</html>

jsonp.js代码：

$.ajax({
    url: 'http://127.0.0.1:3050',
    method: 'GET',
    dataType: 'jsonp',
    success: res => {
        console.log(res);
    },
})

回调函数的添加和执行都是jq做好的,jsonp给我们创建好的,jsonp现在不常用了,jq能实现,单独的jsonp模块也能实现vue里面也有$.jsonp,都可以帮我们实现jsonp的效果

JSONP问题

jsonp基于script src发请求=>是资源文件请求都是get请求,所以jsonp只能处理get请求

函数通过url问号传参的形式传输,可能存在url劫持,导致数据泄露,服务器返回一个木马程序的js,导致程序的不安全

2.CORS

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置.

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

客户端(发送ajax请求)

$('.btn1').click(function () {
            $.ajax({
                url: "http://127.0.0.1:3050",
                method: 'GET',
                data: { user_name: 100, user_password: 200 },
                success: function (res) {
                    console.log(res);
                }
            })
        })

服务器端设置相关的头信息

res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
res.setHeader('Access-Control-Allow-Methods','GET, POST')
res.setHeader('Access-Control-Allow-Headers','Content-type,Content-Length')

也可以设置

res.setHeader('Access-Control-Allow-Origin','*')

但是不安全,表示任意域名都可访问

3.http proxy代理

webpack webpack-dev-server

相当于node给你模拟了一个nginx服务请求,服务器请求服务器不存在跨域

需要借助webpack

安装webpack webpack-dev-server html-webpack-plugin

创建一个webpack.config.js来配置webpack

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');


module.exports = {
  mode:'production', //生产模式
  entry: './src/index.js', //入口
  output: { //出口
    filename: 'bundle.mian.js',
    path: path.resolve(__dirname,'build'),
  },
  devServer:{
      port:3080,
      progress:true, //显示打包的进度
      contentBase:'./build', //指定哪个目录下是我要访问的目录
      proxy:{
          '/':{
            target:'http://127.0.0.1:3050/', //注意最后加斜杠
            changeOrigin:true //改变源 dev-server会帮我们启动一个服务来做中层代理,请求先到node中间件,在里面帮我们自动设置跨域请求
          }
      }
  },
  plugins: [ 
    new HtmlWebpackPlugin({ //能够把html产出的插件
        template:'./src/index.html',
        filename:'index.html'
    })
  ],

}

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name=viewport        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">    <title>Document</title></head><body>    <div class='main'></div>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    <script>    </script></body></html>

index.js

$.ajax({
    url: "/",
    method: 'GET',
    data: { user_name: 100, user_password: 200 },
    // dataType:'json',
    success: function (res) {
        console.log(res);
    }
})
console.log('ok');

4.nginx反向代理

涉及到nginx环境搭建,和前端关系不大

跨域原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

5.postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.）页面和其打开的新窗口的数据传递
b.）多窗口之间消息传递
c.）页面与嵌套的iframe消息传递
d.）上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

页面1

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <iframe id="iframe" src="http://127.0.0.1:3050/05postMessage2.html" frameborder="0" style="display: none;"></iframe>
    <button class="btn1">按钮1</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // console.log(iframe.contentWindow);
        iframe.onload = function () {
            iframe.contentWindow.postMessage('页面2', 'http://127.0.0.1:3050/')
        }

        // 监听2传过来的信息
        window.onmessage = function (e) {
            console.log(e.data);
        }
    </script>
    </script>
</body>

</html>

页面2

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <button class="btn1">按钮2</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // 监听a发过来的信息
        window.onmessage = function (e) {
            console.log(e.data);
            e.source.postMessage(e.data + '我收到了', e.origin)
        }
    </script>
</body>

</html>

6.scoket

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

webSocket协议跨域(客户端和服务端的实时通信协议)

需要引入socket.io

socket.html

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.2/socket.io.min.js"></script>
    <script>
        // 打开一个 web socket  这里端口号和上面监听的需一致
        var ws = new WebSocket('ws://localhost:3000/');

        // Web Socket 已连接上，使用 send() 方法发送数据
        ws.onopen = function () {
            // 这里用一个延时器模拟事件
            setInterval(function () {
                ws.send('客户端消息');
            }, 2000);
        }
        // 这里接受服务器端发过来的消息
        ws.onmessage = function (e) {
            console.log(e.data)
        }

    </script>
</body>

</html>

server.js

var ws = require('nodejs-websocket');
var server = ws.createServer(function(socket){
// 事件名称为text(读取字符串时，就叫做text)，读取客户端传来的字符串
　  var count = 1;
    socket.on('text', function(str) {
　　     // 在控制台输出前端传来的消息　　
        console.log(str);
        //向前端回复消息
        socket.sendText('服务器端收到客户端端发来的消息了！' + count++);
    });
}).listen(3000);
console.log('服务器启动');

7.document.dommain + iframe

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

只能实现同一个主域主域,不同子域之间的操作

页面1

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <iframe src="http://127.0.0.1:3050/基于iframe2.html" frameborder="0"></iframe>
    <script>
        document.domain = '127.0.0.1';
        var user = 'admin'
    </script>
</body>

</html>

8.window.name+ iframe

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

页面1与页面二非同源

页面1与页面三同源

页面1

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'>111</div>
    <iframe id="iframe" src="http://localhost:8080/ajax/%E4%BB%A3%E7%A0%81/node/sub/public/iframe_name2.html"
        frameborder=""></iframe>
    <script>
        let count = 0
        iframe.onload = function () {
            if (count === 0) {
                // 需要我们先把地址重新指向同源中
                iframe.src = 'http://127.0.0.1:3050/iframe_name3.html'
                count++;
                return
            }
            console.log(iframe.contentWindow.name);
        }
    </script>
</body>

</html>

页面2

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <script>    
    // 服务器需要返回给1的信息都在window.name里面存着
        window.name = '333'
    </script>
</body>

</html>

页面3

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <script>

    </script>
</body>

</html>

9.location.hash + iframe

实现原理： a欲与b跨域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

页面1与页面二非同源

页面1与页面三同源

页面1

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <iframe id="iframe" src="http://localhost:8080/ajax/%E4%BB%A3%E7%A0%81/node/sub/public/iframe_hash2.html"
        frameborder="0"></iframe>
    <script>
        let iframe = document.getElementById('iframe')
        // 想2.html传hash值
        iframe.onload = function () {
            iframe.src = 'http://localhost:8080/ajax/%E4%BB%A3%E7%A0%81/node/sub/public/iframe_hash2.html#msg=123'
        }

        // 开放给同域3.html 的回调函数
        function func(res) {
            console.log('ok');
            console.log(res);
        }

    </script>
</body>

</html>

页面2

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <iframe id="iframe" src="http://127.0.0.1:3050/iframe_hash3.html" frameborder="0"></iframe>
    <script>
        let iframe = document.getElementById('iframe')
        // 想2.html传hash值
        window.onhashchange = function () {
            // 监听a传过来的hash值,传给3.html
            iframe.src = 'http://127.0.0.1:3050/iframe_hash3.html' + location.hash
        }

    </script>
</body>

</html>

页面3

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

<head>
    <meta charset="UTF-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class='main'></div>
    <script>
        // 监听b传过来的hash值
        window.onhashchange = function () {
            // 再通过操作同域1.html的js回调,将结果传回
            window.parent.parent.func(location.hash)
        }
    </script>
</body>

</html>