hapi,nuxtjs跨域请求

2019-12-03 16:33:49

参考地址 不到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() 复制代码

结语

跨域问题其实并不复杂,网上教程也非常多,其实对于同源策略和跨域的概念,只要阅读 MDN 就可以了,自己动手创建一个服务器,对照调试工具和后端日志,查看 HTTP 请求和响应,加深理解。希望这个实例教程能帮助大家理解前端跨域 和 Hapi 框架的使用。

附上一个 整理和机翻的 Hapi 中文文档,觉得有用的小伙伴可以点点关注。



  • 2020-04-03 19:13:05

    Express-session的使用

    当浏览器访问服务器并发送第一次请求时,服务器端会创建一个 session 对象,生成一个类似于 key,value 的键值对,然后将 key(cookie)返回到浏览器(客户)端,浏览器下次再访问时,携带 key(cookie), 找到对应的 session(value)。 客户的信息都保存在 session 中

  • 2020-04-08 22:46:28

    Element的操作方法

    Element 是一个通用性非常强的基类,所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如, HTMLElement 接口是所有 HTML 元素的基本接口,而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级(hierarchy)的接口中被进一步制定的。

  • 2020-04-12 17:42:43

    Node.js设置CORS跨域请求中多域名白名单的方法

    在Node.js中,res的响应头Header中的 Access-Control-Allow-Origin 属性不能匹配除 (*) 以外的正则表达式的,域名之间不能也用逗号分隔。也就是说, Access-Control-Allow-Origin 的属性值只允许设置为单个确定域名字符串或者 (*)。

  • 2020-04-14 09:40:59

    CSS3实现文字描边的2种方法

    首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke     该属性是一个复合属性,可以设置文字宽度和文字描边颜色      该属性使用很简单:text-stroke:1px #f00;(1px是文字宽度,#ff是文字描边颜色)

  • 2020-04-14 09:42:47

    用 TypeScript 编写 npm 模块

    自从开始使用 Node.js 已经一年多,写的代码越多,越是觉得自己提高的越慢。想来应该有没有将单一功能的代码封装在一个独立模块,而导致代码稍微多一点就维护困难的原因。

  • 2020-04-14 09:46:25

    TypeScript 入门教程

    TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。 TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。