7.允许跨域请求
-- 未经授权禁止转载 --

安装

     npm i @koa/cors


报错

Access to fetch at 'http://127.0.0.1:8008/' from origin 'null' 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.


当一个网页脚本尝试从一个源(null)访问另一个源的资源时(http://127.0.0.1:8008/),

浏览器的CORS(Cross-Origin Resource Sharing)跨域资源共享策略,会检查目标服务器是否允许跨域访问

若目标服务器没有设置允许跨域访问的响应头(Access-Control-Allow-Origin)

浏览器将阻止这个跨域请求


源(null)

请求来自没有明确来源的环境, 如:Fetch API调用


在web开发中,"域" 主要指的是网络请求的来源(origin),

由协议(如:http或https)、域名和端口三部分组成

http://dengruicode.com:80 和 https://dengruicode.top:443 是两个不同的域


import Koa from 'koa'
import Router from '@koa/router'
import Cors from '@koa/cors'

const hostname = "127.0.0.1"
const port = 8008

const app = new Koa()
const router = new Router() //实例化一个 Router 对象

app.use(Cors()) //允许跨域请求

router.get('/', async ctx => { //get请求
    ctx.body = "dengruicode.com"
})

app.use(router.routes()) //将定义在 router 对象中的路由规则添加到 app 实例中

app.listen(port, hostname, () => {
    console.log(`服务器已启动: http://${hostname}:${port}`)
})