网络相关

[anjia]

Cookie

document.cookie

• 当是 HTTP only 时，通过 JS 取不到。只能通过 HTTP 请求自己传（安全考虑）
• 想要种/取 cookie，不能是 ip，需要是域名：前端、数据 API
• 想要让请求服务器的数据 API 也带 cookie，需要设置 Request 的 凭证
  • credentials: "include" 或 withCredentials: true

前端路由和数据接口，均配置 host

function escapeRe(str) {
    return str.replace(/[.*+?^$|[\](){}\\-]/g, '\\$&');
}

// Get the cookie value by key.
function get(key, decoder = decodeURIComponent) {
    if ((typeof key !== 'string') || !key) {
        return null;
    }

    const reKey = new RegExp(`(?:^|; )${escapeRe(key)}(?:=([^;]*))?(?:;|$)`);
    const match = reKey.exec(document.cookie);
    if (match === null) {
        return null;
    }

    return typeof decoder === 'function' ? decoder(match[1]) : match[1];
}

export default {
    get: get
}

[anjia]

跨域

报错.1

Access to XMLHttpRequest at 'http://api.test.com' from origin 'http://www.test.com'
has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因：跨域 解决：res.header('Access-Control-Allow-Origin', '*');

报错.2

Access to XMLHttpRequest at 'http://api.test.com' from origin 'http://test.com'
has been blocked by CORS policy:
The value of the 'Access-Control-Allow-Origin' header in the response
must not be the wildcard '*' when the request's credentials mode is 'include'.
The credentials mode of requests initialed by the XMLHttpRequest 
is controlled by the withCredentials attribute.

Access to XMLHttpRequest at 'http://api.test.com' from origin 'http://www.test.com'
has been blocked by CORS policy:
The 'Access-Control-Allow-Origin' header contains multiple values
'http://www.test.com:8888,http://www.test.com:8889',
but only one is allowed.

原因：跨域+凭据 解决：

• 前端 request，加
• 后端服务 response，开启

  res.header('Access-Control-Allow-Credentials', 'true'); 
  res.header('Access-Control-Allow-Origin', origin);

报错.3

原因：请求没发送成功 解决：跨域相关、ResponseHeader 的一系列Access-Control-Allow-*

Provisional headers are shown 显示临时 Header 原因较多。eg. 取了缓存-没真正发请求

---

res.header('Access-Control-Allow-Credentials', 'true');  // 开启凭据/证书。会带上 cookie
res.header('Access-Control-Allow-Origin', origin);  // 开启了凭据，此处需具体的 origin, 且不能多个
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

[anjia]

• 要用到 cookie，提前配域名
• API 可提前支持跨域
  • ps. jsonp 是个 hack 的跨域方式，尽量不用
• API 及其 method，可提前确定

[anjia]

POST 提交数据

POST 提交的数据是在消息主体（entity-body）中的。

但是，协议并没有规定数据的编码方式。所以，我们可以自行决定消息主体的格式。

具体用哪种格式，需要和服务器端约定下 毕竟，提交的数据，只有服务器解析成功了，才有意义

一般情况，服务器端语言及他们的 framework，都内置了自动解析常见数据格式的功能。 通常，是根据 Request Header 里的 Content-Type 来得知请求中消息主体的编码方式的。

所以，POST 提交数据的方案，包含了两部分：

• Content-Type
• 消息主体的编码方式

application/x-www-form-urlencoded

最常见的，POST 提交数据的方式。

浏览器原生的<form>如果不设置enctype属性，默认就是这种方式

两部分：

• Request Headers 里，Content-Type 的值是 application/x-www-form-urlencoded
• Form Data 里，编码方式是：key 和 value 都进行了 URL 编码
  • 大部分服务端语言，都很好的支持了这种编码。取值时，可直接取

Form Data - 解析过的	Form Data - 源格式

multipart/form-data

也很常见。

• 一般用它来上传文件
• 当<form>里有<input type="file">时，它的enctype必须是 multipart/form-data

application/json

此时，那两部分：

• Request Headers 里，Content-Type 的值是 application/json
• Form Data 里，数据的编码方式是：序列化的 JSON 字符串

JSON 规范很流行。

• 前端：JSON.stringify()只有低版本 IE 不支持外，其余浏览器都支持
• 服务器端：也都有处理 JSON 的函数，一般没啥问题
  • 但也有部分服务器语言没支持此种方式
  • eg. PHP 无法通过 $_POST 对象从上面的请求获得内容，可手动处理
    • 当 Request Headers 里的 Content-Type 是 application/json 时
    • 将php://input里取到的输入流，再json_decode成对象

此方式可以很方便地提交复杂的结构化数据，特别适合 RESTful 接口 各大抓包工具都会以树形结构展示 JSON 数据，很友好

text/xml

此时，Form Data 里数据的编码方式是 XML。

相对 JSON，它的结构还是有些臃肿。

当然，我们也可以自定义新的数据格式，来提交

---

application/x-www-form-urlencoded 和 multipart/form-data 都是浏览器原生支持的。

在现阶段的标准中，原生<form>表单也只支持这两种格式，是通过enctype属性指定的。

当 method 属性是 post 时，enctype指定提交给服务器的 MIME 类型。取值可以是：

• application/x-www-form-urlencoded 当未指定属性时，会默认它
• multipart/form-data 用于有<input type="file">元素时
• text/plain （使用较少）

[anjia]

axios

• 要让请求带缓存，axios.defaults.withCredentials = true
• 能统一拦截 request 和 response
• 若有两类不同的 axios 请求，建议将两者分开。一个用create弄个新的
  • 全局的配置，可能会相互干扰
  • 对 request 和 response 的不同处理，也方便分开
• 不支持 jsonp。 作者霸气 V5
  • 若非要支持，则可引入其它库
• POST 提交数据时，不直接支持 Content-Type: application/x-www-form-urlencoded
  • 要么前端特殊处理下，把 Form Data 转成 x-www-form-urlencoded 对应的编码格式的
  • 要么让后端支持下application/json，取到数据后先 json_decode 下~

// 拦截请求
axios.interceptors.request.use(config => {
    if(config.url == URL.login){
        return config
    }else{
        return new Promise((resolve, reject) => {
            myFunc().then(data => {
                resolve(config)
            }).catch(err => {
                reject(err)
            })
        })
    }
}, error => {
    return Promise.reject(error);
})

// 拦截响应
axios.interceptors.response.use( response => {
    if(response.status==200 && response.data.errno==4000){
        go_to_login_page()
    }else{
        return response
    }
}, err => {
    return Promise.reject(err)
})

https://github.com/axios/axios

[anjia]

cookie, localStorage, sessionStorage #43

[anjia]

JSON.stringify

stringify() 字符串，会多个双引号

JSON.stringify('anjia')   // 输出 ""anjia""

[anjia]

ping-pong

• ping ~ "喂，你在吗？"
• pong ~ "嗨，我在呢！"

服务器心跳：服务器发送ping，浏览器收到了会自动返回pong，且会主动触发服务器的onPong方法

浏览器心跳：浏览器自带了心跳机制。但并不是标准规范，而是厂商们自己设计的