不到50行代码搞懂跨域（CORS）-优快云博客

目标

使用 Hapi 框架在实例 CORS 场景下测试首部字段作用。这里不需要你掌握 Hapi 框架的使用，以及任何 Node 知识。

准备工作

你需要懂得哪方面的知识？

会使用 XMLHttpRequest(Ajax) / Fetch 发起 HTTP 请求
基本的 HTTP 知识
理解基本的 CORS 知识

下面我们会对照这 MDN 上 CORS 部分的讲解（下面简称 讲解），使用具体代码来测试首部字段的作用。

代码部分

主体结构我们按照 Hapi 官网的示例，修改路由部分。

const Hapi = require('@hapi/hapi')

const init = async () => {
  const server = Hapi.server({
    port: 3000,
    host: 'localhost'
  })
  server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
      console.log(request.info)
      console.log(request.headers)
      return {
        code: 200,
        data: {
          success: true
        }
      }
    }
  })
  await server.start()
  console.log('Server running on %s', server.info.uri)
}

process.on('unhandledRejection', err => {
  console.log(err)
  process.exit(1)
})

init()
复制代码

这样我们就有了一个本地 3000 端口的服务，并有一个 / 路径的 API。下面我们使用 Fetch 发起一个跨域请求，使用 Chrome 打开任意网站，打开 开发者工具，在 Console 下进行测试。

fetch('http://localhost:3000')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });
复制代码

收到以下错误：

Access to fetch at 'http://localhost:3000/' from origin 'developer.mozilla.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

直接访问 http://localhost:3000 是可以看到结果的。说明浏览器限制从脚本内发起的跨源HTTP请求。

下面增加允许跨域源的字段

path: '/',
+++ options: {
+++   cors: {
+++     origin: ['*']
+++   }
+++ },
复制代码

以上代码等同于在 response headers 中增加 access-control-allow-origin 字段为 *，允许任何源的跨域请求。

再次访问，成功获取到内容。对照 MDN 讲解并查看 Chrome Network 面板中 headers 部分和服务日志。

简单请求与预检请求

对照讲解理解 “简单请求” 和 ”预检请求“ 的区别。

下面发起一个 POST JSON 的请求，并在服务端接收。

--- method: ['GET']
+++ method: ['GET', 'POST'],

// 输出请求体
+++ console.log(request.payload)
复制代码

fetch('http://localhost:3000', {
	method: 'POST',
	body: JSON.stringify({'user': 'kenny'}),
	headers: new Headers({
    'Content-Type': 'application/json'
  })
})
复制代码

在 Network 中会看到有 2 次请求发起，因为我们修改了除规定以外的首部字段，所以首先发起了一个 options 的预检请求。

OPTIONS 是 HTTP/1.1 协议中定义的方法，用以从服务器获取更多信息。该方法不会对服务器资源产生影响。

同样我们查看 Network 中的 headers 部分进行对比和理解。

带 Cookie 的跨域请求

Fetch 与 CORS 的一个有趣的特性是，可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。

首先增加一个 domain 为 localhost 的 cookie 在测试域下。然后增加下面代码。

// 携带凭证
fetch('http://localhost:3000', {
    credentials: 'include'
})
复制代码

origin: ['*']
+++ credentials: true


// 输出 cookie
+++ console.log(request.state)
复制代码

执行后会发现还是跨域错误。这是因为对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

所以修改 origin

--- origin: ['*'],
+++ origin: ['https://developer.mozilla.org'],
复制代码

现在执行，可以在日志中看到刚刚增加的 cookie。

反过来，我们在服务端设置 cookie，看前端能否生效。

h.state('user', 'kenny', {
    isSecure: false,
    isHttpOnly: false,
    isSameSite: 'false',
    domain: 'localhost'
})
复制代码

同样可行。

携带额外的首部信息和获取前端的首部信息

Access-Control-Allow-Headers 其指明了实际请求中允许携带的首部字段。

Access-Control-Expose-Headers：

在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

首先我们获取服务器时间

先删除多余代码

--- console.log(request.payload)
--- console.log(request.state)
--- h.state('user', 'kenny', {
--- isSecure: false,
--- isHttpOnly: false,
--- isSameSite: 'false',
--- domain: 'localhost'
--- })
复制代码

fetch('http://localhost:3000')
  .then(function(response) {
    console.log(response.headers.get('Date'))
  })

// null
复制代码

后端增加代码，允许获取额外的头部。

+++ additionalExposedHeaders: ['Date']
复制代码

再次测试后显示接口获取时服务器的时间。

现在前端发送一个自定义的头(Region) 代表当前的地理位置（北京: 52），然后使用后端获取它。

fetch('http://localhost:3000', {
    headers: new Headers({
        'Region': 52
    })
})
复制代码

+++ additionalHeaders: ['Region']
复制代码

可以从后端日志中看到 headers 含有 Region 字段

关于 Hapi 框架的 CORS 设置，可以参考：Hapi route cors

全部代码：

const Hapi = require('@hapi/hapi')

const init = async () => {
  const server = Hapi.server({
    port: 3000,
    host: 'localhost'
  })
  server.route({
    method: ['GET', 'POST'],
    path: '/',
    options: {
      cors: {
        origin: ['https://*.mozilla.org'],
        credentials: true,
        additionalExposedHeaders: ['Date'],
        additionalHeaders: ['Region']
      }
    },
    handler: (request, h) => {
      console.log(request.info)
      console.log(request.headers)
      console.log(request.payload)
      console.log(request.state)
      // 设置 cookie
      // h.state('user', 'kenny', {
      //   isSecure: false,
      //   isHttpOnly: false,
      //   isSameSite: 'false',
      //   domain: 'localhost'
      // })
      return {
        code: 200,
        data: {
          success: true
        }
      }
    }
  })
  await server.start()
  console.log('Server running on %s', server.info.uri)
}

process.on('unhandledRejection', err => {
  console.log(err)
  process.exit(1)
})

init()

复制代码