ajax上传大数据时引起跨域问题解决方案

需求背景

项目有一个HTML转PDF的需求,如果是正常的上传文件还好说,现在是前端直接上传文件内容,比如直接粘贴复制html数据到输入框然后进行上传~

出现问题

数据量小还行,可能里面有图片被转成了base64 导致上传的数据高达几M,就会出现问题,比如通过JSON方式传输的时候会导致浏览器直接跨域,所以改成了application/x-www-form-urlencoded的请求方式

import request from "@/utils/request";
import qs from 'qs'

export const inster = (data) => {
  return request({
    url: "/inster",
    method: "post",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    data: qs.stringify(data)
  });
};

注意

在发送请求的时候要将请求参数用qs 序列化,否则后台解析还需要做判断

node demo 参考代码

const Koa = require('koa')
const bodyParser = require('koa-bodyparser')
const Router = require('koa-router')
const cors = require('koa2-cors')
const app = new Koa()
const router = new Router()

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

}))

app.use(bodyParser({
  enableTypes:['json', 'form', 'text'],
  formLimit:"10mb", // 尽量设置大一些,如果请求的数据超过设置的数据,会出现跨域问题
  queryString:{
    parameterLimit: 100000000000000
  }
}))

router.get('/', async (ctx) => {
  ctx.type = 'html';
  ctx.body = '<h1>hello world!</h1>';
})

router.post('/inster', async ctx => {
  console.log(ctx.request.body.content)
})


app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000, () => {
  console.log('请求port: 3000')
})