网页调试时报错 , jsonp 原理 (急速理解 , 并可立刻实践)

最新推荐文章于 2023-10-08 15:12:19 发布

xiaobo-921

最新推荐文章于 2023-10-08 15:12:19 发布

阅读量300

点赞数 1

分类专栏： javascript 文章标签：前端 jsonp 原理 javascript src

本文链接：https://blog.csdn.net/qq_39582021/article/details/89883479

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器报错: No 'Access-Control-Allow-Origin' header is present on the requested resource

发生场景: 在 WebStorm 中编写页面调试接口时

发生错误原因: 跨域访问接口(或者说跨服务器访问接口,ip 或端口或域名不一样都会造成跨域问题)

发生错误具体原因: 测试时 , 在本机开启 node 后台服务后 , 由于是在 WebStorm 中打开页面 , 此时 WebStorm 会自动启动默认微服务器 , 然后 WebStorm 中的微服务器中的页面又去访问 Node 服务器中的接口 , 造成跨域问题的出现

当前问题解决方式: 直接在浏览器中输入具体的地址和端口 , 访问 node 服务器中 public 文件夹中的指定目录下的 index.html

跨域问题解决: 通常使用 jsonp 的方式请求(jquery都已经有支持) , 只限于 get 请求 , 核心原理是利用了标签的 src 属性本身就能跨域的能力 , 开发者需要与后台配合 , 编写特定的 api 接口 , 接口最终返回的其实是一个带有参数的方法名 , 返回到客户端后 , 就会被指定的方法接收到服务器传回的参数 , 也就是我们需要的数据

前端代码: 这段代码的调用放在你的电脑上运行( 重要: 因为我们的目的就是演示跨域访问)

就是: 用 webStorm 打开的网页 , 是在 webStorm 的微服务器上的 , php 代码需要放在另外一个服务器上

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<script type="text/javascript">
	function getData(data) {
		console.log(data);
	}
</script>
<!-- 使用 script标签 发送了 get请求 到后台 , 后台处理完后 , 就会返回一个 getData(data) 的方法 , 这样就会调用到 上面写的 getData 方法 , 最终实现跨域获取数据 -->
<script type="text/javascript" src='http://xxx/?callback=getData'></script>

后端代码: php 代码需要放在另外一个服务器上

<?php 

	// $_GET['callback'] 获取到了是网页发送过来的 getData 参数,  返回的是 'getData(data)';
    // echo 是向网页响应数据的意思 , '.' 是拼接的意思

	echo $_GET['callback'].'({"name":"小行星","color":"red"})';

    // 最终返回给客户端的就是: getData({"name":"小行星","color":"red"})
    // 这句话在服务端就是一个字符串 , 但是返回到了客户端的 javascript 标签中 , 那就成了方法调用

 ?>


// 更直白的理解:
     1. 就是在客户端中的的这个请求链接: http://xxx/?callback=getData  
     2. 会在 javascript 标签中返回服务端返回的字符串  : getData({"name":"小行星","color":"red"})

自己测试时必须注意的问题 , 再提醒一遍

1. html 必须放在 webStrom 中运行 , 因为 webStrom 可以模拟一台小服务器

2. php 代码必须放在另外一台服务器上

3. 这样 html 中的 script 标签中的 src 属性 , 就可以去模拟请求跨域访问 , 并通过回调的字符串调用本地方法 ,实现数据回调

4. 提示: script 中的 src 通过 http 请求到的结果 , 会填充到 script 标签中 , 就像图片标签一样 , 只不过 script 标签不显示而已

xiaobo-921

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页调试时报错 , jsonp 原理 (急速理解 , 并可立刻实践)

浏览器报错: No 'Access-Control-Allow-Origin' header is present on the requested resource发生场景: 在 WebStorm 中编写页面调试接口时发生错误原因: 跨域访问接口(或者说跨服务器访问接口,ip 或端口或域名不一样都会造成跨域问题)发生错误具体原因:测试时 , 在本机开启 node 后台服务后 ...
复制链接

扫一扫