koa踩坑路之--本地localhost:8080访问本地服务器localhost:3002跨域实现的两种方式

koa踩坑路之–本地localhost:8080访问本地服务器localhost:3002跨域实现的两种方式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

学习koa过程中，需要本地8080端口访问本地后台3002接口，但是报错跨域，再不适用koa-cros之前找到的方法，一直无法跨域，后经研究后实现，现将两种方式源码贴上，希望可以帮助到正在踩坑中的新手，新手上路，大神请绕行！

---

一、第一种方法 设置允许跨域

用这种方式的时候必须要加上app.use(router.allowedMethods());否则无法跨域。

import koa from 'koa';
import router from './routes/routes.js';
const app = new koa();

app.use(async (ctx, next) => {
    ctx.set("Access-Control-Allow-Origin", "*");
    ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
    ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");
    await next();
})

app.use(router.routes());
app.use(router.allowedMethods());//此种方法必须调用此方法，不然无法实现跨域

app.listen('3002');

不调用app.use(router.allowedMethods())，依然无法实现跨域

调用app.use(router.allowedMethods())后就实现跨域了

二、第二种方法，使用koa-cros

代码如下（示例）：

import koa from 'koa';
import cors  from 'koa-cors';
import router from './routes/routes.js';
const app = new koa();

app.use(cors({
    origin: '*',
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))

app.use(router.routes());

app.listen('3002');

axios withCredentials须为false（在跨域请求时，不会携带用户凭证） 要不依旧不能实现跨域

withCredentials: false,

---

总结

踩坑路漫漫长@~@