本文将对跨域/跨站Cookie的相关知识点做一个简单的理解性质的总结梳理.

前端跨域

浏览器的同源策略是导致前端出现跨域问题的主要原因.

什么是同源策略

同源策略是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的URI、主机名和端口号，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档对象模型访问另一网页上的敏感数据。

同源策略对Web应用程序具有特殊意义，因为Web应用程序广泛依赖于HTTP cookie来维持用户会话，所以必须将不相关网站严格分隔，以防止丢失数据泄露。

值得注意的是同源策略仅适用于脚本，这意味着某网站可以通过相应的HTML标签访问不同来源网站上的图像、CSS和动态加载脚本等资源。而跨站请求伪造就是利用同源策略不适用于HTML标签的缺陷。

同源的严格条件

同源策略认定, 在同源策略生效场景下, 若不满足以下任意一个条件, 则非同源, 即跨域:

1. 相同协议
2. 相同域名(域名完全匹配, 子域A到子域B也不满足这一条件)
3. 相同端口

查看更多

该文章因为特殊原因暂时被锁定，无法阅读，您可以先行阅读其他文章内容。

本文基于该文进行翻译、扩充： https://medium.com/@agent_hunt/hello-world-custom-react-renderer-9a95b7cd04bc

本文将实现一个基本的小型 Hello-World React 项目的渲染器，但这不是React渲染器真正的实现，并且和其有很大的不同。

创建一个新的 React 项目

首先，创建并运行一个新的 React 项目

1
2
3

create-react-app custom-render
cd custom-render
yarn start/npm start

添加一个小型的业务交互代码

其次，我们在新创建的项目中，增加一些业务交互代码，如点击事件、状态变更。这个简单交互的业务代码将成为一个测试例子来帮助我们了解渲染器接口的实际工作。

计数器是满足小型业务交互的场景，让我们添加一个简单的计数器，修改 src/App.js 的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <p className="App-intro">
          <div className="button-container">
            <button className="decrement-button" onClick={() => setCounter(counter - 1)}>
              -
            </button>
            <span className="counter-text"> {counter} </span>
            <button className="increment-button" onClick={() => setCounter(counter + 1)}>
              +
            </button>
          </div>
        </p>
      </header>
    </div>
  );
}

export default App;

查看更多

EasyMock 环境搭建

EasyMock 简述

EasyMock 是一个开源的数据模拟项目，可以模拟接口报文返回、报错等情景，适合有接口文档的前后端平行开发。

EasyMock 的环境依赖

• node 8.11.0 以下版本
• Mongodb
• Redis

查看更多

什么是虚拟Dom

虚拟 Dom（virtual Dom）正如其名，它并不是真正的 Dom 对象，但可以根据虚拟 Dom 来转换为真正的 Dom 对象。

虚拟 Dom 其实是一个 JavaScript 对象，对于下面所示的 Dom 结构：

1
2
3
4
5

<ul class="lists">
    <li>1</li>
    <li class="item">2</li>
    <li>3</li>
</ul>

该 Dom 结构所对应的 JavaScript 对象可以是这样的：

查看更多

AJAX允许浏览器在无需刷新的情况下，异步的更新界面。

AJAX的特点

• 无刷新的更新数据

• 与服务器进行异步通信

• 破坏了浏览器机制
  在无刷新更新页面数据的情况下，用户无法返回上一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。

• 安全问题
  伪造AJAX请求的方式引发了一定的安全问题，不要认为每个请求都是真实合理的，例如用户可以自行发送AJAX请求到服务器端，从而绕过前端的数据检查。针对这一问题，需要在服务器端保留数据的逻辑验证。其次的安全问题一般有sql注入、跨站信息伪造等等。

  查看更多

VUE 是一种基于数据截获来实现双向绑定的，这篇文章将浅显的分析一下 VUE 是如何实现双向绑定的，并根据原理，简要实现这部分代码。

MVVM

MVVM 目前是一种前端开发的架构模式，其三个组成部分是模型（Model）、视图（View）、视图模型（View Model）。
MVVM 使视图和逻辑得以分开，交由视图模型统一管理，由数据驱动视图模型更新，从而影响视图更新；
而交互所造成的变动，也将反应在视图模型上。

查看更多

本文整理自 React状态管理与同构实战 一书，部分内容略有不同。若您对更多内容感兴趣，可以尝试购买。

如若你还不了解 Redux 的一些基本要素，你可以去阅读我的 初识Redux 一文。

Store 的实现

Store 不是类。它只是有几个方法的对象。这些方法在 初识Redux 一文中有介绍过。（你也可以去阅读 Redux 文档中关于 Store 的定义，点击 这里 ）

1
2
3
4
5
6

store = (
    dispatch,
    getState,
    subscribe,
    replaceReducer
}

我们使用 createStore() 这一个 API 来创建 store 对象，因此我们将从这个方法入手。（阅读 createStore API）关于 createStore() 方法的定义如下：

查看更多

AJAX（Asynchronous Javascript And XML，异步Javascript和XML）是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX是通过核心对象XMLHttpRequest，使用Javascript向服务器提出请求，并处理响应。

AJAX请求分析

一般的，我们在AJAX的使用上，习惯性的将请求链接、请求方法、回调函数等封装成一个对象，若AJAX请求成功，将触发对象中的成功回调函数。即我们的使用是这样的：

查看更多

promise的简单使用

promise是异步的解决方案之一，可以通过实例化 Promise 类，并传入一个 executor 来进行使用。
executor 是一个函数，该函数的两个参数分别是 resolve 和 reject 。它们是两个由 JavaScript 引擎提供的函数。分别用以成功回调以及错误回调。

1
2
3
4
5
6
7

const p = new Promise(function(resolve, reject) {
    if (/*异步操作成功*/) {
        resolve(value);
    } else {
        reject(error);
    }
})

查看更多