nodejs跨域请求cookie设置

1.说明
前端源：http://localhost:3000
后端源：http://localhost:8888

前端代码

//axios简单封装

import axios from "axios";

axios.defaults.baseURL = 'http://localhost:8888';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.withCredentials=true
axios.defaults.timeout = 3000;
interface requestOption {
    url: string,
    method: string,
    validateStatus: Function,
    params?: {},
    data?: {}
}

export const request = (url: string, type = "GET", data = {}) => {
    return new Promise((resolve, reject) => {
        let option: requestOption = {
            url,
            method: type,
            validateStatus(status: number) {
                return (status >= 200 && status < 300) || status === 400
            },
        }
        if (type.toLowerCase() === 'get') {
            option.params = data
        } else {
            option.data = data
        }
        axios(option).then(res => {
            if (res.status === 200) {
                resolve(res.data)
            } else {
                reject(res.data)
            }
        }).catch(() => {
            reject({msg: "网络异常"})
        })
    })
}

//使用封装后的axios发请求

request("/signIn", "POST", values).then((res) => { console.log(res) }

后端代码（nodejs）

...
  response.statusCode = 200;
  response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  response.setHeader("Content-Type", "text/html;charset=utf-8");
  response.setHeader("Access-Control-Allow-Credentials",true);
  response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
  response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  response.setHeader("Access-Control-Max-Age", "3600");
  response.setHeader("Set-Cookie", `session_id=1; HttpOnly`)
  ...

跨域请求还有一个预检会同时发两个请求其中OPTIONS方法是预检请求

options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。

HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为"*"）使用该方法。(简而言之，就是可以用 options 请求去嗅探某个请求在对应的服务器中都支持哪种请求方法)。

这是因为在跨域的情况下，在浏览器发起"复杂请求"时主动发起的。跨域共享标准规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。

某些请求不会触发CORS预检请求，这样的请求一般称为 “简单请求” ，而会触发预检的请求则是 “复杂请求” GET请求一般没有预检。

预检请求的配置与正式请求的一样，即可让后台直接通过OPTIONS请求

配置好这些就可以跨域访问并设置cookie了

总结

1. axios.defaults.withCredentials=true
   withCredentials表示跨域请求时是否需要使用凭证
2. response.setHeader("Access-Control-Allow-Credentials",true)
   响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。
3. response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000")
   必须指定一个源不能是*
4. response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
5. 配置好预检请求（与正式请求的配置一样就行）