WPS加载项报Network Error

Question

问题描述

我在写一个WPS的加载项，写到发送请求拿到数据，但是就是一直Network Error。然后我用同样的请求在另外一个普通的Vue项目中试了一下发现完全没问题。

相关代码

WPS加载项的

这是TaskPane.vue

<template>
  <div>
    
    <el-select v-model="value" placeholder="请选择" size="small">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <basic-search :keywords="keywords" v-on:search="search"></basic-search>
    <DocItem></DocItem>
    <DocItem></DocItem>

  </div>
</template>

<script>
...

export default {
  name: 'TaskPane',
  components: {DocItem, BasicSearch},
  methods: {
    ...
    search(keywords) {
      // alert(keywords);
      this.$axios({
        method: 'get',
        url: 'http://localhost:8080/myzproduct/getAllByTitle',
        params: {
          title: "iphone",
        }
      }).then(res=>{
        alert("suceess");
        alert(res.data);
        console.log(res.data);
      },err=>{
        alert("错误是" + err);
        console.log(err);
      })
    },
    ...
}
</script>

这是main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
// 完整引入，main.js写入以下代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.prototype.$axios = axios
Vue.config.productionTip = false

const routerCfg= [
  {
    path: '/', 
    name: '默认页',
    component:()=>import('./components/Root.vue')
  },{
    path: '/taskpane', 
    name: '任务窗格',
    component:()=>import('./components/TaskPane.vue')
  }
]

new Vue({
  render: h => h(App),
  router: new VueRouter({routes:routerCfg}),
  created: function () {
    //
  }
}).$mount('#app')

这是package.json

{
    "name": "cyanfox_1",
    "addonType": "wps",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --port 3889",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "axios": "^0.19.2",
        "core-js": "^3.6.4",
        "element-ui": "^2.15.13",
        "vue": "^2.6.11",
        "vue-router": "^3.1.3"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.2.0",
        "@vue/cli-service": "~4.2.0",
        "vue-template-compiler": "^2.6.11",
        "wps-jsapi": "latest"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": false
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {},
        "globals": {
            "wps": "readonly"
        }
    },
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

这是vue.config.js

// const { defineConfig } = require('@vue/cli-service')
module.exports = {
    "publicPath": "",
    "productionSourceMap": false,
    devServer: {
        proxy: "http://localhost:8081" // 这里存放的是真正的服务器
    }
}

普通Vue项目的

这是vue.config.js

```javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint
  lintOnSave:false,
  devServer: {
    proxy: "http://localhost:8081" // 这里存放的是真正的服务器
  }
})

这是发送请求的

```javascript
mounted() {
    this.$axios({
      method: 'get',
      url: 'http://localhost:8080/myzproduct/getAllByTitle',
      params: {
        title: "iphone",
      }
    }).then(res=>{
      alert("suceess");
      alert(res.data);
      console.log(res.data);
    },err=>{
      alert("错误是" + err);
      console.log(err);
    })
  },

操作环境

Win11，2023.4.6为止最新的WPS，后端是用SSM写的

要求

请尽可能详细描述，采纳标准为我成功在WPS加载项中拿到数据

Answer 1

你TaskPane.vue端口号是8080，后面的端口号是8081，不太懂vue，还是不行的话先用 jsonp 将就下，这里用wpsjs create HelloWps创建一个Excel加载项简单说明。
nodejs后端代码，前提安装koa包

const Koa = require('koa');
const app = new Koa();
const items = [{ id: 1, title: '“情人节讲屁话没用，让别人也单身”' }, { id: 2, title: '那年廿八，还是单身，站着如喽啰' }]

app.use(async (ctx, next) => {
  if (ctx.path == '/api/jsonp') {
    const { cb, id } = ctx.query;
    const title = items.find(item => item.id == id)['title']
    ctx.body = `${cb}(${JSON.stringify({title})})`;
    return;
  }
})
console.log('示例链接: http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback')
app.listen(8080)

在前端taskpane.html页面插入一个script标签输入以下代码，或者直接写js文件引入也可以。

<script>
    function JSONP({
        url,
        params = {},
        callbackKey = 'cb',
        callback
    }) {
        // 定义本地的唯一callbackId，若是没有的话则初始化为1
        JSONP.callbackId = JSONP.callbackId || 1;
        let callbackId = JSONP.callbackId;
        // 把要执行的回调加入到JSON对象中，避免污染window
        JSONP.callbacks = JSONP.callbacks || [];
        JSONP.callbacks[callbackId] = callback;
        // 把这个名称加入到参数中: 'cb=JSONP.callbacks[1]'
        params[callbackKey] = `JSONP.callbacks[${callbackId}]`;
        // 得到'id=1&cb=JSONP.callbacks[1]'
        const paramString = Object.keys(params).map(key => {
            return `${key}=${encodeURIComponent(params[key])}`
        }).join('&')
        // 创建 script 标签
        const script = document.createElement('script');
        script.setAttribute('src', `${url}?${paramString}`);
        document.body.appendChild(script);
        // id自增，保证唯一
        JSONP.callbackId++;
    }
</script>

taskpane.js 的onbuttonclick函数下的switch语句添加两个 case

function onbuttonclick(idStr) {
    if (typeof (wps.Enum) != "object") { // 如果没有内置枚举值
        wps.Enum = WPS_Enum
    }
    switch (idStr) {
        case "addString": {
            let curSheet = wps.EtApplication().ActiveSheet;
            if (curSheet) {
                JSONP({
                    url: 'http://localhost:8080/api/jsonp',
                    params: {
                        id: 1
                    },
                    callbackKey: 'cb',
                    callback(res) {
                        curSheet.Cells.Item(1, 1).Formula = "请求数据成功 " + res.title
                    }
                })
            }
            break;
        }
        case "getDocName": {
            let curSheet = wps.EtApplication().ActiveSheet;
            if (curSheet) {
                JSONP({
                    url: 'http://localhost:8080/api/jsonp',
                    params: {
                        id: 2
                    },
                    callbackKey: 'cb',
                    callback(res) {
                        curSheet.Cells.Item(2, 1).Formula = "请求数据成功 " + res.title
                    }
                })
            }
            break
        }
    }
}

动图效果

jsonp跨域的问题参考这篇文章：前端跨域jsonp的细节，挡住面试官的连环提问