浏览器报错: 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 标签不显示而已