前言 : 本文示例部署大发 888 搭建 QQ2952777280[] hxforum.com 在 XAMPP 建站集成软件包上, 在 localhost 环境下进行测试
1, 什么是跨域
由于浏览器同源策略, 凡是发送请求 url 的协议, 域名, 端口三者之间任意一与当前页面地址不同即为跨域. 存在跨域的情况 :
(1) 网络协议不同, 如 http 协议访问 https 协议.
(2) 端口不同, 如 8080 端口访问 3000 端口.
(3) 域名不同, 如 aaaa.com 访问 bbbb.com.
(4) 子域名不同, 如 java.ddd.com 访问 qianduan.ddd.com.
(5) 域名和域名对应 ip, 如 www.a.com 访问 20.205.28.90.
2,JSONP 方法
因为 srript 标签是不存在跨域的, 所以利用 script 标签, 加载 src 路径, 实现跨域加载 JS 文件. 该 JS 文件中需要定义好一个方法, 将该方法名传递给服务端, 服务端根据该方法名, 拼装一个方法调用语句, 响应给浏览器. 又浏览器来执行该语句调用方法. 通过参数, 将响应的数据取出即可.
(1) 原生 JS 请求方式
前端代码:
- var script = document.createElement('script');
- script.type = 'text/javascript';
- script.src = './js/text.js';
- document.head.appendChild(script);
- // 回调执行函数
- function onBack(res) {
- console.log(res) //{
- name:"小明",age:24
- }
- }
后端代码:
- onBack({
- name:"小明",
- age:24
- })
这里需要注意的是, 后端的数据形式必须作为函数的参数, 且函数名要前后端保持一致.
(2)jQuery 中的 Ajax 请求方式
前端代码:
- $.Ajax({
- url:"./js/text.js",
- type:"GET",
- dataType:"jsonp", // 定义返回方式为 JSONP
- jsonpCallback:"onBack", // 定义回调函数名字, 前后端保持一致
- success:function(data){
- console.log(data) //{
- name:"小明",age:24
- }
- },
- error:function(res){
- console.log("请求失败!")
- }
- })
后端代码:
- onBack({
- name:"小明",
- age:24
- })
缺点 1: 只能使用 get 请求.
缺点 2: 因为使用的是 script 标签, 存在安全隐患.
优点 1: 支持老式浏览器, 以及可以向不支持 CORS 的网站请求数据.
来源: http://www.bubuko.com/infodetail-2956571.html