跨域通信详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43742121/article/details/120398908

同源策略
协议域名端口这三个一致就是同域
http://www.aa.cn:8081
https://www.bb.cn:8082

在这里插入图片描述为什么浏览器不支持跨域

cookie localStorage这些都是同域下的，不支持跨域
DOM元素也也有同源策略 iframe
ajax 也不支持跨域

实现跨域（期望两个页面见可以实现通信怎么弄？？？）
1、jsonp
2、cors（后端提供）
3、postMessage (两个页面间的通信)
4、document.domain
5、window.name
6、location.hash(哈希)
7、http-proxy
8、nginx
9、websocket

1、jsonp
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
三种方式不受同源策略的影响

<!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>
    <!-- <link ref="stylesheet" href="cdn"></link> -->
</head>
<body>
    <!-- <img src="www.baud.xxx.png" alt="xxxx"/> -->
    <!-- https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34646,34528,34068,31254,34552,34004,34525,34585,34517,26350,34416,34556,34682&wd=ddd&req=2&bs=csdn&csor=3&pwd=dd&cb=jQuery1102023487320684976987_1632186297386&_=1632186297403 -->
    <!-- https://www.baidu.com/sugrec?wd=a&b=show -->
    <!-- https://www.baidu.com/sugrec?pre=1
        &p=3
        &ie=utf8
    &json=1
    &prod=pc
    &from=pc_web
    &sugsid=34646,34528,34068,31254,34552,34004,34525,34585,34517,26350,34416,34556,34682
    &wd=ddd
    &req=2
    &bs=csdn
    &csor=3
    &pwd=dd
    &cb=jQuery1102023487320684976987_1632186297386
    &_=1632186297403 -->
    <script>
        function jsonp(url,params,cb){

九种跨域处理