前端基础知识：Promise|跨域（jsonp、cookie）

2021-2-2

Promise 必须为以下三种状态之一：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）。

基本过程：

  1. 初始化 Promise 状态（pending）
  2. 执行 then(..) 注册回调处理数组（then 方法可被同一个 promise 调用多次）
  3. 立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给 fn ，按事件机制时机处理
  4. Promise中要保证，then方法传入的参数 onFulfilled 和 onRejected，必须在then方法被调用的那一轮事件循环之后的新执行栈中执行。

真正的链式Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise.

跨域

不同地址，不同端口，不同级别，不同协议都会构成跨域。

跨域方案

window.postMessage

window.postMessage是html5的功能，是客户端和客户端直接的数据传递，既可以跨域传递，也可以同域传递。

栗子：假如有一个页面，页面中拿到部分用户信息，点击进入另外一个页面，另外的页面默认是取不到用户信息的，你可以通过window.postMessage把部分用户信息传到这个页面中。（需要考虑安全性等方面。）

发送信息

//弹出一个新窗口
var domain = 'http://haorooms.com';
var myPopup = window.open(`${domain}/windowPostMessageListener.html`,'myWindow');

//周期性的发送消息
setTimeout(function(){
    var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
    console.log('传递的数据是  ' + message);
    myPopup.postMessage(message, domain);
},1000);

要延迟一下，我们一般用计时器setTimeout延迟再发用。

接受的页面

//监听消息反馈
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://haorooms.com') return;
    //这个判断一下是不是我这个域名跳转过来的
    console.log('received response: ', event.data);
}, false);

如下图，接受页面得到数据

enter image description here

如果是使用iframe，代码应该这样写：

//捕获iframe
var domain = 'http://haorooms.com';
var iframe = document.getElementById('myIFrame').contentWindow;

//发送消息
setTimeout(function(){ 
    var message = {name:"站点",sex:"男"};
    console.log('传递的数据是:  ' + message);
    iframe.postMessage(message, domain); 
},1000);

接受数据

//响应事件
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://haorooms.com') return;
    console.log('message received:  ' + event.data,event);
    event.source.postMessage('holla back youngin!',event.origin);
},false);

上面的代码片段是往消息源反馈信息，确认消息已经收到。下面是几个比较重要的事件属性：

**source – 消息源，消息的发送窗口/iframe。
origin – 消息源的URI(可能包含协议、域名和端口)，用来验证数据源。
data – 发送方发送给接收方的数据。**

CORS跨域资源共享

CORS跨域和jsonp跨域的优势：

CORS与JSONP相比，无疑更为先进、方便和可靠。

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS

CORS的使用

CORS要前后端同时做配置。

1、首先我们来看前端。

纯js的ajax请求。

<script type="text/javascript">
    var xhr = new XMLHttpRequest(); 
    // ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
    xhr.open("GET", "/haorooms", true);
    xhr.send();
</script>

以上的haorooms是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
    xhr.open("GET", "http://www.haorooms.com/CORS", true);
    xhr.send();
</script>

当然，你也可以用jquery的ajax进行。

2、后端或者服务器端的配置

下面我们主要介绍Apache和PHP里的设置方法。

Apache：Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的 < Directory >, < Location>, < Files >或< VirtualHost>的配置里加入以下内容即可：

Header set Access-Control-Allow-Origin *

PHP：只需要使用如下的代码设置即可。

<?php  
 header("Access-Control-Allow-Origin:*");

以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源，例如下面的设置使得只有www.haorooms.com这个域才能跨域访问服务器的API。

Access-Control-Allow-Origin: http://www.haorooms.com

通过jsonp跨域

jsonp跨域也需要前后端配合使用。一般后端设置callback ，前端给后台接口中传一个callback 就可以。

例如前端代码：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://haorooms.com/data.php?callback=dosomething"></script>

后台代码：

<?php
  $callback = $_GET['callback'];//得到回调函数名
  $data = array('a','b','c');//要返回的数据
  echo $callback.'('.json_encode($data).')';//输出
?>

假如你用ajax方式进行jsonp跨域:

$.ajax({  
    type : "get",  
    url : "跨域地址",  
    dataType : "jsonp",//数据类型为jsonp  
    jsonp: "callback",
    //服务端用于接收callback调用的function名的参数【后台接受什么参数，我们就传什么参数】
    success : function(data){  
        //结果处理
    },  
    error:function(data){  
          console.log(data);
    }  
});

通过修改document.domain来跨子域

我们只需要在跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。

栗子：

1.在页面 http:// www.haorooms.com/a.html 中设置document.domain

<iframe id = "iframe" src="http://haorooms.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'haorooms.com';//设置成主域
    function test(){
       alert(document.getElementById('iframe').contentWindow);
       //contentWindow 可取得子窗口的 window 对象
    }
</script>

2、在页面http:// haorooms.com/b.html 中设置document.domain

<script type="text/javascript">
    document.domain = 'haorooms.com';
    //在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

使用window.name来进行跨域

原理：

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。

方法：

假如有三个页面。

a.com/app.html：应用页面。
a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

1、在应用页面（a.com/app.html）中创建一个iframe，把其src指向数据页面（b.com/data.html）。

数据页面会把数据附加到这个iframe的window.name上，data.html代码如下：

<script type="text/javascript">
   window.name = 'I was there!';    
   // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
   // 数据格式可以自定义，如json、字符串
</script>

2、在应用页面（a.com/app.html）中监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）。

app.html部分代码如下：

<script type="text/javascript">
    var state = 0, 
    iframe = document.createElement('iframe'),
    loadfn = function() {
        if (state === 1) {
            var data = iframe.contentWindow.name; // 读取数据
            alert(data);
        } else if (state === 0) {
            state = 1;
            iframe.contentWindow.location = "http://a.com/proxy.html";    
            // 设置的代理文件
        }  
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
        iframe.attachEvent('onload', loadfn);
    } else {
        iframe.onload  = loadfn;
    }
    document.body.appendChild(iframe);
</script>

3、获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。

<script type="text/javascript">
    iframe.contentWindow.document.write('');
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
</script>

webpack解决跨域问题

webpack也可以解决前端跨域问题，只需要安装webpack 的http-proxy-middleware模块就可以

npm install http-proxy-middleware --save-dev

配置如下：

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: './app/js/index.js'
  output: {
  path: path.resolve(__dirname, 'dev'),
    // 所有输出文件的目标路径
    filename: 'js/bundle.js',
    publicPath: '/',
    chunkFilename: '[name].chunk.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dev'),
    publicPath: '/',
    historyApiFallback: true,
    proxy: {
      // 请求到 '/device' 下的请求都会被代理到target：http://debug.haorooms.com中
      '/device/*': {
        target: 'http://debug.haorooms.com',
        secure: false, // 接受运行在https上的服务
        changeOrigin: true
      }
    }
  }
}

使用如下：

fetch('/device/space').then(res => {
  // 被代理到 http://debug.haorooms.com/device/space
  return res.json();
});

fetch('device/space').then(res => {
  // http://localhost:8080/device/space 访问本地服务
  return res.json();
});

// 注：使用的url 必须以/开始 否则不会代理到指定地址

cookie跨域

业务场景

1、百度www域名下面登录了，发现yun域名下面也自然而然登录了。

2、淘宝登录了，发现天猫也登录了，淘宝和天猫是完全不一样的2个域名。

栗子

  1. 同一个主域下面的跨域问题，类似www.baidu 和yun.baidu

cookie属性：
path

cookie 一般都是由于用户访问页面而被创建的，但是并不是只有在创建 cookie 的页面才可以访问这个cookie。在默认情况下，出于安全方面的考虑，只有与创建 cookie 的页面处于同一个目录或在创建cookie页面的子目录下的网页才可以访问。那么此时如果希望其父级或者整个网页都能够使用cookie，就需要进行路径的设置。

path表示cookie所在的目录，haorooms.com默认为/，就是根目录。 在同一个服务器上有目录如下：

/post/,/post/id/,/tag/,/tag/haorooms/，/tag/id/

现假设一个

cookie1的path为/tag/，cookie2的path为/tag/id/，

那么tag下的所有页面都可以访问到cookie1，而/tag/和/tag/haorooms/的子页面不能访问cookie2。 这是因为cookie2能让其path路径下的页面访问。

让这个设置的cookie 能被其他目录或者父级的目录访问的方法：

document.cookie = "name = value; path=/";

domain

domain表示的是cookie所在的域，默认为请求的地址，

如网址为 http://www.haorooms.com/post/... ，那么domain默认为www.haorooms.com。

而跨域访问，

如域A为love.haorooms.com，域B为resource.haorooms.com，

那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.haorooms.com；

如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为resource.haorooms.com。

这样，我们就知道为什么www.百度 和yun.baidu共享cookie，我们只需要设置domain为.baidu.com就可以了【注：点好是必须的】

  1. 天猫和淘宝是如何共享cookie的？

cookie跨域解决方案一般有如下几种：

1、nginx反向代理

反向代理（Reverse Proxy）方式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容 原本就是它自己的一样。

nginx配置如下：

upstream web1{
     server  127.0.0.1:8089  max_fails=0 weight=1;
}
upstream web2 {
     server 127.0.0.1:8080    max_fails=0 weight=1;
}

　　　 location /web1 {
        proxy_pass http://web1;
        proxy_set_header Host  127.0.0.1;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

        proxy_set_header Cookie $http_cookie;
        log_subrequest on;
    }

    location /web2 {
        proxy_pass http://web2;
        proxy_set_header Host  127.0.0.1;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header Cookie $http_cookie;
        log_subrequest on;
    }

3、nodejs superagent

package.json中的模块依赖：

enter image description here

调用superagent api请求：

enter link description here

其实本质也是jsonp的方式。

同一域下，不同工程下的cookie携带问题

cookie跨域访问之后，可以成功的写入本地域。本地的前端工程在请求后端工程时，有很多是ajax请求，ajax默认不支持携带cookie，所以现在有以下两种方案：

（1）. 使用jsonp格式发送
（2）. ajax请求中加上字段 xhrFields: {withCredentials: true}，这样可以携带上cookie

enter image description here

服务器需要配置：

Access-Control-Allow-Credentials: true

localStorage跨域

THE END
前端基础知识：对象属性类型|函数式编程
<<上一篇
前端基础知识：AMD、CMD 和 CommonJS 的模块化开发
下一篇>>
相关推荐
前端vue开发技巧：使用原生fetch 发送post请求
Node.js与OpenAI API构建情感分析应用
响应式设计：打造适配所有屏幕的H5页面大小
内置WebSocket客户端API！nodejs 23提供什么新能力？
全球最火CSS框架Tailwind CSS 4.0 正式发布
选择大于努力！2025前端开发6大发展方向
使用 Parcel 和 NPM 脚本进行JavaScript 应用打包
服务器端渲染的未来：2025年SSR VS Jamstack趋势