前端跨域，动态ip,求各种解决方式

前端跨域问题

这是html 结构代码
<div class="bnc-module">
        <el-select v-model="iframeUrl" placeholder="">
            <el-option
                v-for="item in bncList"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictValue">
            </el-option>
        </el-select>
        <el-row :gutter="10">
            <p>{{iframeUrl}}</p>
        </el-row>

        <el-row :gutter="10" class="xxx">
            <el-button type="primary" @click="startThrough">开始放通</el-button>
            <el-button type="primary" @click="stopThrough">结束放通</el-button>
        </el-row>

        <div class="iframe-container">
            <iframe :src="`${iframeUrl}` +  '/bnc_show'" class="iframe"></iframe>
        </div>
    </div>

因为iframeUrl是一个变量，目前准备用jsonp来处理
这是代码

startThrough(){
            var script = document.createElement('script');
            script.type = 'text/javascript';
            // script.type = 'text/html';

            // 传参并指定回调执行函数为onBack
            script.src = 'http://10.221.164.124/bnc_op?op=set_pass_level&level=0&duration=600000000&callback=onBack';
            document.head.appendChild(script);

            // 回调执行函数
            function onBack(res) {
                console.log(res);
            }
        },

第二张图片是点击第一张报错的的结果，是接口实际的返回值

我的解答思路和尝试过的方法

从上面的报错来看，是后台返回的内容放到script标签中，格式错误，当我将script标签格式改为‘text/html’时，没有报错，也没有执行回调onBack方法，打印出来的script标签，依然是空标签

我想要达到的结果

我想要获取返回的内容并作为变量来使用，谢谢各位！

可以尝试下使用代理来解决这个问题。https://blog.csdn.net/Run_youngman/article/details/120813536?spm=1001.2014.3001.5502

可以换种请求方法，跨域的话,用axios获取，希望能帮助到你

调用的是其他项目的接口，所以后台那边是不能改的，看样子是没有允许的，jsonp的方式可以获取到返回的内容了，但返回的内容是这样的

放通级别：0,时长:600000000<br/>
number,number<br/>
放通级别已设置为0<br/>

应该是写入script标签的格式不对，请问可以通过修改type值或者其他方法来解决吗

后端接口也必须进行跨域处理，跨域出现的原因就是请求通信时双方：协议不同，ip不同，端口不同，就会导致跨域从而产生请求失败，只需要在接口上打上@CrossOrigin跨域注解就好了

简单描述下需要的效果

中间的元素是iframe标签链接的其他项目，上边的两个按钮用来切换iframe标签的src属性，绑定不同的ip路径，开始放通按钮点击后，会调用当前展示iframe的ip路径，发送请求，就是这里产生了跨域