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

最新推荐文章于 2024-04-03 11:47:39 发布

文正哟

最新推荐文章于 2024-04-03 11:47:39 发布

阅读量1w

点赞数 1

分类专栏：各类库

本文链接：https://blog.youkuaiyun.com/m0_47955692/article/details/108914586

版权

各类库专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在跨域环境下，使用axios发起POST请求遇到的CORS复杂请求问题。当axios的content-type默认为application/json时，会触发CORS的预检请求。解决方案包括：1. 修改axios的content-type为简单的form-data格式，或者2. 在服务器端通过引入koa-cors中间件，允许application/json的复杂请求，以确保客户端和服务端的正常交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景：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="接收到了后台的数据"
}