跨域情况下，axios发起post请求的CORS处理

情景：node运用koa库，发起后端服务；前端axios发起post请求，传送json数据。 坑：axios默认的content-type是application/json;utf-8。如此一来，直接变成了cors的复杂请求。

如果只是简单请求，koa-router可以进行如下设置：

router.post('/login',()=>{ ctx.set("Access-Control-Allow-Origin", "http://localhost:3000") ctx.set("Access-Control-Allow-Credentials",true) }

客户端和服务端是可以正常交互的。

为了解决axios默认content-type为content-type所产生的复杂请求，有2个解决思路： 1、将axios的content-type设置为简单请求的格式application/x-www-form-urlencoded、multipart/form-data 或 text/plain 代码如下

http({ url:'/login', method:'post', data:{ user:user, pwd:pwd }, headers:{ 'Content-type': 'application/x-www-form-urlencoded' //或其他格式 } })

2、在服务器端允许application/json的复杂请求 利用koa库时，可以增加koa-cors的引用，可直接解决跨域问题。代码如下

const Koa = require('koa'); const Router = require('koa-router'); const koaBody = require('koa-body'); const cors = require('koa-cors') const login = require('./libs/login'); const app = new Koa(); const router = new Router; app.use(koaBody()); app.use(cors()); //增加这个应用 router.post('/login',login) app.use(router.routes()); app.listen(8080);

另，经尝试，如下方法没用。。。。。

(ctx) => { ctx.set("Access-Control-Allow-Origin", "http://localhost:3000") ctx.set("Access-Control-Allow-Credentials",true) // 如果引用了koa-cors，上面两行也不用设置 // 涉及到复杂请求的时候，下面这些设置无效，需要另外引用koa-cors； // ctx.set('Access-Control-Allow-Methods','OPTIONS,POST') // ctx.set('Access-Control-Allow-Headers','Content-Type') // ctx.set('content-type',"application/json; charset=utf-8") // ctx.type = 'application/json; charset=utf-8'; console.log('接收到了前端的请求',ctx.request.body); ctx.body="接收到了后台的数据" }