1. 跨域问题
在前后端分离开发的过程中,跨域是一个很常见的问题,跨域的解决方案也多种多样,如:
- 通过jsonp跨域
- document.domain + iframe跨域
- location.hash + iframe
- window.name + iframe跨域
- postMessage跨域
- 跨域资源共享(CORS)
- nginx代理跨域
- nodejs中间件代理跨域
- WebSocket协议跨域
更多详细介绍:https://juejin.im/post/5d1ecb96f265da1b6d404433
2. CORS
本文重点介绍跨域资源共享(CORS)的解决方案,这种方案是目前最容易理解也是醉强大的方案,其重点在于后端服务器的实现。跨域资源共享的原理就是相当于将请求资源的域设置到一个白名单中,只要是白名单中的域,就可以访问到当前域的资源。
当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。
当我们在前端使用 AJAX 发起一个跨域请求的时候,正常情况下是会出现 CORS 警告的,其内容如下:
其意思大致为:你从 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.