14.2 跨域 - cors

index.html

document.cookie = 'name=cookieZxp'
fetch('http://localhost:4000/getData', {
  method: 'PUT',
  headers: {
    'name': 'zxp'
  },
  credentials: 'include' // 跨域请求携带cookie，需开启此凭证
})
.then(res => {
  console.log(res.headers.get('name'), 'x1'); //application/json
  return res.text()
})
.then(res => {
  console.log(res)
})

 

后端

server1.js

let express = require('express')
let app  = express()
app.use(express.static(__dirname))  // index.html
app.listen(3000)

 

server2.js

const app  = express()
const whileList = ['http://localhost:3000'] // 白名单
app.use((req, res, next) => {
  let origin = req.headers.origin;
  if (whileList.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin)  // 设置允许跨域的源 这里origin是http://localhost:3000  *表示域可以访问，不能和Access-Control-Allow-Credentials共用（设置哪个源可以访问我）
    res.setHeader('Access-Control-Allow-Headers', 'name') // 前端设置header头，后端需同步设置。（允许携带哪个头访问我）
    res.setHeader('Access-Control-Allow-Methods', 'PUT')  // 不设置 默认支持get、post、head（允许哪个方法访问我）
    res.setHeader('Access-Control-Allow-Credentials', true) // （允许携带cookie）
    res.setHeader('Access-Control-Max-Age', 6)  // 预请求的返回结构被缓存的时间 （预检的存活时间）
    res.setHeader('Access-Control-Expose-Headers', 'name') // 参考 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Expose-Headers  （允许前端获取哪个头）
    if (req.method === 'OPTIONS') {
      res.end() // OPTIONS请求不做任何处理 （Request Method:OPTIONS)
    }
  }
  next()
})
app.put('/getData', (req, res) => {
  console.log(req.headers)  // 因为设置了Credentials，这里能拿到cookie
  res.setHeader('name', 'zxp2') // 这里的zxp2浏览器Response Headers里能拿到
  res.end('我不爱你')
})
app.get('/getData', (req, res) => {
  console.log(req.headers)
  res.end('我不爱你')
})
app.listen(4000)