b2538720288 2022-01-14 11:26 采纳率: 50%
浏览 20
已结题

为什么请求不受同源策略限制，但返回并执行的javaScript则受限制？

问题遇到的现象和发生背景

为什么请求不受同源策略限制，但返回并执行的javaScript则受限制？
为什么请求又会授http/https协议的限制？

问题相关代码，请勿粘贴截图
<script src="http://****.js" > </script>
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
  • 写回答

1条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-01-14 11:34
    关注

    jsonp原理

    JSONP 的工作原理是什么？ - 知乎 很简单，就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当… https://www.zhihu.com/question/19966531

    套用答主解析
    作者：jzplp
    链接：https://www.zhihu.com/question/19966531/answer/1719857050
    来源：知乎
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

    JSONP不是一门语言，也并不是什么特别开发的技术，它更像是一个BUG，一个开发者找出来可以用来作为跨域传输数据的”漏洞”。虽然名字中带的是JSON，但其实严格来说，传输的javascript代码，只不过代码内容基本都是json而已。JSONP的原理非常简单，就是HTML标签中，很多带src属性的标签都可以跨域请求内容，比如我们熟悉的img图片标签。同理，script标签也可以，可以利用script标签来执行跨域的javascript代码。通过这些代码，我们就能实现前端跨域请求数据。最关键的方法是这样的：前端网页中写一个fun1，接受跨域传来的数据并处理。请求的跨域script标签中的代码则是执行这个函数，里面包含跨域的数据：fun1(data)。这样跨域的数据就可以被原有的前端js接受并处理了。我们来看一下最简单的JSONP的例子：html代码，直接浏览器打开即可

      <body>
    <div>
      receive <span id="qwerty"> </span>
    </div>
  </body>
  <script>
    function callfun(data) {
      document.getElementById('qwerty').innerHTML = data;
    }
  </script>
  <script src="http://127.0.0.1:10010/js?call=callfun"></script>
</html>

    后端使用的egg.js，核心代码只有ctx.body那一句'use strict';

    const Controller = require('egg').Controller;
class JsonpController extends Controller {
  async index() {
    const { ctx } = this;
    console.log(ctx.query);
    ctx.set('content-type', 'text/javascript');
    ctx.body = ctx.query.call + '("nihao")';
  }
}

    为了让后端知道我们前端的回调函数的名字，我们在script的请求中加入了call=callfun参数，后端接收到ctx.query.call， 再和'("nihao")'合并，最后形成了字符串 callfun("nihao")这一句JS代码，传到前端。这个"nihao"就是我们从后端跨域传输到前端的数据了。callfun函数处理这个数据，显示到了屏幕中。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 5月3日
  • 已采纳回答 4月25日
  • 创建了问题 1月14日

悬赏问题

  • ¥50 三种调度算法报错 采用的你的方案
  • ¥15 关于#python#的问题，请各位专家解答！
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备