参考文章: https://www.cnblogs.com/fangshidaima/p/10495890.html

一. koa2 允许跨域

安装库 koa2-cors

npm i koa2-cors --save

然后在app.js中:

const cors = require('koa2-cors');

app.use(
  cors({
      origin: function(ctx) { //设置允许来自指定域名请求
          if (ctx.url === '/test') {
              return '*'; // 允许来自所有域名请求
          }
          return 'http://localhost:8080'; //只允许http://localhost:8080这个域名的请求
      },
      maxAge: 5, //指定本次预检请求的有效期，单位为秒。
      credentials: true, //是否允许发送Cookie
      allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法'
      allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
      exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //设置获取其他自定义字段
  })
);

二. 举例---前端vue项目

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

写了一个hello组件用axios发起请求

<template>
  <div>
    <h2>hello</h2>
    <button @click="btntest">OK</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    btntest() {
      console.log("haha");
      this.$axios({
        method: "get",
        url: "http://localhost:3000",
        data: null,
      })
        .then((response) => {
          console.log(response); //请求成功返回的数据
        })
        .catch(
          (error) => console.log(error) //请求失败返回的数据
        );
    },
  },
};
</script>

在app.vue中引入这个组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Hello></Hello>
  </div>
</template>

<script>

import Hello from "./components/hello"

export default {
  name: 'App',
  components: {
    Hello
  }
}
</script>

三. 举例 后端

安装koa2-cors

npm install koa2-cors

在app.js中:

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')

const index = require('./routes/index')
const users = require('./routes/users')
const cors = require('koa2-cors'); //跨域处理


app.use(
  cors({
      origin: function(ctx) { //设置允许来自指定域名请求
          if (ctx.url === '/test') {
              return '*'; // 允许来自所有域名请求
          }
          return 'http://localhost:8080'; //只允许http://localhost:8080这个域名的请求
      },
      maxAge: 5, //指定本次预检请求的有效期，单位为秒。
      credentials: true, //是否允许发送Cookie
      allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法
      allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
      exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //设置获取其他自定义字段
  })
);

// error handler
onerror(app)

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'pug'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

运行结果: