IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 大数据 -> ajax上传大数据时引起跨域问题解决方案 -> 正文阅读

[大数据]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')
})
  大数据 最新文章
实现Kafka至少消费一次
亚马逊云科技:还在苦于ETL?Zero ETL的时代
初探MapReduce
【SpringBoot框架篇】32.基于注解+redis实现
Elasticsearch:如何减少 Elasticsearch 集
Go redis操作
Redis面试题
专题五 Redis高并发场景
基于GBase8s和Calcite的多数据源查询
Redis——底层数据结构原理
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 11:59:21  更:2021-07-17 11:59:56 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 4:12:07-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码