Koa中解决跨域问题的方案

1. 跨域问题

在前后端分离开发的过程中,跨域是一个很常见的问题,跨域的解决方案也多种多样,如:

  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享(CORS)
  7. nginx代理跨域
  8. nodejs中间件代理跨域
  9. WebSocket协议跨域

更多详细介绍:https://juejin.im/post/5d1ecb96f265da1b6d404433

2. CORS

本文重点介绍跨域资源共享(CORS)的解决方案,这种方案是目前最容易理解也是醉强大的方案,其重点在于后端服务器的实现。跨域资源共享的原理就是相当于将请求资源的域设置到一个白名单中,只要是白名单中的域,就可以访问到当前域的资源。

当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

当我们在前端使用 AJAX 发起一个跨域请求的时候,正常情况下是会出现 CORS 警告的,其内容如下:

20190921180624.png

其意思大致为:你从 http://localhost:3100 请求 http://localhost:3000/getData 的资源是不可能的,因为你的请求地址 不符合基本法Access-Control-Allow-Origin 中没有你的标志。

Access-Control-Allow-Origin 就相当于一个白名单,后台需要设置这个白名单,请求的域在这个白名单中才能获得相应的资源。

在 Koa 中,我们可以通过上下文对象来设置 Access-Control-Allow-Origin,同时由于 Koa 的中间件机制,可以将跨域的处理逻辑放在最前面,当进行路由匹配前,检查请求资源的域是否在白名单中,总体的设置如下:

const Koa = require('koa')
const Router = require('koa-router')
const bodypaser = require('koa-bodyparser')
const static = require('koa-static')
const path = require('path')

const app = new Koa()
const router = new Router()
app.
  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值