vue中this.$http.post()跨域和请求参数丢失解决方案

methods: {
    research: function () {
        //post请求远程资源
        this.$http.post(
            //请求的url
            "http://www.hefeixyh.com/login.html",
            //请求参数,不能以get请求方式写:{params: {userName: "root123", passWord: "root123"}}
            {userName: "root123", passWord: "root123"},
            //解决跨域问题,不加无法跨域
            {emulateJSON: true}
        ).then(result=>{
            console.dir(result)
        }).catch(error=>{
            console.dir(error)
        });
    }
}

主要是前端传的时候带上token,因为在回调时,我的文件中心是需要进行token校验的,直接进行回调时不行,需要带上token,但是我目前的代码还是不行,没传上相关的token: <template> <div id="editor"></div> </template> <script> import { mapGetters } from "vuex"; import {pbService} from "@/api/manage"; const downloadUrl = "http://192.168.100.234:3000/api/file/fileDownload/"; const callBackUrl = "http://192.168.100.234:3000/api/file/fileUpload/"; // const jwtToken= ls.get('token'); // const kunlnToken = "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJEOEM3NkJBMzE0QjQ0MjM3ODQ4OTQwN0ZGMEU0REY5QSIsInN1YiI6IkQ4Qzc2QkEzMTRCNDQyMzc4NDg5NDA3RkYwRTRERjlBIiwiaWF0IjoxNzYyNzYxNzM2LCJleHAiOjE3NjI4MDQ5MzZ9.av2R2L2UoBJeYODD7vFJOPwzy6hMFgbyDZZcPVMdDp8"; import { ls } from '@/utils/storage'; export default { name: 'OnlyView', data() { return { form: this.$form.createForm(this), jparam: {}, showPrintBtn: false, businessid: this.$route.query.businessid, openFileType: this.$route.query.openFileType, fileId: this.$route.query.fileid, pd_code: this.$route.query.pd_code, direction_type: this.$route.query.direction_type, title_uuid: this.$route.query.title_uuid, module_type: this.$route.query.module_type, syscompanyuuid: this.$route.query.syscompanyuuid, draft_fileid: this.$route.query.draft_fileid, print_fileid: this.$route.query.print_fileid, deal_fileid: this.$route.query.deal_fileid, first_edit: this.$route.query.first_edit, default_correct: this.$route.query.default_correct, onlyView: true, viewType: this.$route.query.viewType, intellShow: false, analogyShow: false, onlyData: {}, timerDeleteButton: undefined, instance: undefined, } }, props: { documentUrl: { type: String, required: true, }, documentKey: { type: String, required: true, }, documentTitle: { type: String, required: true, }, jwtToken: { type: String, required: true, }, }, mounted() { // this.jwtToken = '' this.documentKey = this.draft_fileid this.documentTitle = this.draft_fileid this.loadEditor(); }, computed: { ...mapGetters(['userInfo']) }, methods: { loadEditor() { // 创建 script 元素,用于加载 Only文档编辑器 API const script = document.createElement('script'); // 设置 script 元素的 src 属性为 API 的 URL script.src = 'http://192.168.100.234:8088/web-apps/apps/api/documents/api.js'; // 加载完成后调用 initEditor 方法初始化编辑器 script.onload = () => { this.initEditor(); }; // 将 script 元素添加到文档头部 document.head.appendChild(script); }, async initEditor() { // 获取从 props 传递过来的文档信息 JWT const { documentUrl, documentKey, documentTitle, jwtToken } = this; // 配置文档编辑器的参数 const editorConfig = await this.getOnlyOnlineConfig(this.draft_fileid, jwtToken, this.userInfo); // 关键:如果检测到字段被重命名,手动恢复 if (editorConfig.legacyQiankunDocument && !editorConfig.document) { editorConfig.document = editorConfig.legacyQiankunDocument; delete editorConfig.legacyQiankunDocument; } console.log("修复后的编辑器配置:", editorConfig); // 确认此时有document字段 console.log('-------- editorConfig =' + JSON.stringify(editorConfig)) // 初始化文档编辑器 const docEditor = new DocsAPI.DocEditor('editor', editorConfig); }, /** * 获取在线编辑器配置 * @param {string} fileId - 文件ID * @param {string} jwtToken - 令牌 * @param {object} userInfo - 用户信息 * @returns {Promise<object>} 编辑器配置 */ async getOnlyOnlineConfig(fileId, jwtToken, userInfo) { const token = ls.get('token'); const callbackUrlWithToken = `${callBackUrl}?Kunln-Token=${encodeURIComponent(token)}` const callbackUrlWithToken01 = `$Kunln-Token=${encodeURIComponent(token)}` console.log("0001",callbackUrlWithToken) console.log(token) const fileInfo = await this.getFileInfoByFileId("07324A0461444323A04336698BE8794A"); const documentUrl = downloadUrl + "07324A0461444323A04336698BE8794A" // 注意:downloadUrl需确保已定义 console.log(documentUrl) let editorConfig = ''; if (fileInfo.result) { const fileExt = fileInfo.result.fileext; // 获取文件的扩展名 // 配置文档编辑器的参数 editorConfig = { document: { fileType: fileExt, title: "07324A0461444323A04336698BE8794A", url: documentUrl, key: "07324A0461444323A04336698BE8794A"+Date.now(), permissions: { download: true, // 允许下载 edit: true, // 允许编辑 history: true, // 允许查看历史 print: true // 允许打印 }, "Kunln-Token": token, }, editorConfig: { callbackUrl: callBackUrl, // 注意:callBackUrl需确保已定义 // callbackUrl: callbackUrlWithToken, //方式1:URL参数传递Token(100%生效) // headers: { // 关键:启用请求头传递 Token( Excel 导出完全一致) // "Kunln-Token": token, // 字段名必须 Excel 导出时一致 // "Content-Type": "application/json" // 补充:确保请求体格式正确 // }, // "Authorization": `Kunln-Token ${token}`, // 放入 Authorization 头,符合 OnlyOffice 配置 user: { id: userInfo.loginname, // 用户 ID name: userInfo.personname // 用户名 }, customization: { autoSave: { enabled: true, delay: 2 // 自动保存的时间间隔(以分钟为单位) }, // 关键!OnlyOffice 回调请求(上传/保存)的自定义请求头,必须放这里! httpHeaders: { "Kunln-Token": token, // 重点:用户级 Token 放在这里,会自动携带到 callbackUrl 请求中 } }, "lang": "zh-CN", token: token, }, // token: jwtToken // JWT 令牌 // token: token }; console.log("onlyOnline editorConfig = " + JSON.stringify(editorConfig)) return editorConfig; } }, /** * 根据文件Id获取文件信息 * @param {string} fileId - 文件Id * @returns {Promise<Object|Error>} - 结果或错误对象 */ async getFileInfoByFileId(fileId) { try { return await pbService('service.file.fileService', 'queryFileInfoByPK', { "user_info": "07324A0461444323A04336698BE8794A", "result_fields": "fileid,fileext,filename", }); } catch (error) { alert("获取文件信息失败!" + error) return error; } } }, }; </script> <style scoped> #editor { width: 100%; height: 100%; } </style>
最新发布
11-15
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值