四、实现跨域访问
时间:2022-07-23
本文章向大家介绍四、实现跨域访问,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
同源策略
同源:协议相同、域名相同、端口号相同
如果非同源那么将收到的限制:
- Cookie、LocalStorage和IndexDB无法读取
- DOM无法获得
- AJAX请求不能发送
互联网默认原则:同源策略(不允许跨域访问)
常见跨域
- link元素
- script元素
- img元素
- iframe元素
JSONP
通过动态创建 script
标签,通过 script
标签的 src
请求没有域限制来获取资源
例如在 html 页面中,将 script
标签地址改为后端接口。
网页通过添加一个<script>
元素,向服务器请求JSON数据,这种做法不受同原政策限制;服务器收到请求后,将数据放在一个指定名的回调函数里传回来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn(data) {
console.log(data);
}
</script>
<script src="http://127.0.0.1:3000?callback=fn"></script>
</body>
</html>
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
res.end('fn({"msg":"Hello world"})');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
getJSON方法
$.getJSON('http://127.0.0.1:3000?callback=?',function(){
console.log(data);
})
调用的函数名jQuery会自动生成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
$.getJSON('http://127.0.0.1:3000?callback=?', function (data) {
console.log(data);
})
</script>
</body>
</html>
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
var urlObj = require("url").parse(req.url);
var functionName = urlObj.query.split("&")[0].split("=")[1];
console.log(functionName);
res.end(`${functionName}({"msg":"Hello world"})`);
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
jQuery会自动生成回调函数的名称。
- 使用sklearn构建含有标量属性的决策树
- 利用Python sklearn的SVM对AT&T人脸数据进行人脸识别
- C/C++网络编程时注意的问题小结
- PHP防止SQL注入的方法
- HTML5离线缓存攻击测试
- IE的BHO通过IHTMLDocument2接口获得网页源代码
- 【C++】小心使用文件读写模式:回车('r') 换行('n')问题的一次纠结经历
- 【C】用C语言提取bmp图片像素,并进行K-means聚类分析——容易遇到的问题
- SEED缓冲区溢出实验笔记
- HTTP严格安全传输(HTTP Strict Transport Security, HSTS)chromuim实现源码分析(一)
- Linux下ls命令显示符号链接权限为777的探索
- Django form表单
- Django ORM那些相关操作
- 使用mitmproxy嗅探双向认证ssl链接——嗅探AWS IoT SDK的mqtts
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C++核心准则Con.2:默认情况下,将成员函数定义为const类型
- C++核心准则Con.3:默认情况下,传递参照常量的指针或引用
- C++核心准则Con.4:如果一个对象在构建之后值不会改变,使用const定义它
- C++核心准则Con.5:对于可以在编译时计算的值,使用constexpr进行声明
- DB2 Linux平台安装 Part 4 创建数据库
- VBA编写Ribbon Custom UI编辑器03——认识Ribbon的xml
- VBA编写Ribbon Custom UI编辑器04——解析xml
- VBA编写Ribbon Custom UI编辑器05——转换结构体XML
- MySQL 8.0.19 Linux平台安装 Part 1
- MySQL 8.0.19 Linux平台安装 Part 2
- 使用XtraBackup备份MySQL 8.0 Part 1 xtrabackup 8.0 安装
- 10个解放双手的 IDEA 插件,少些冤枉代码!
- 二叉树的 4 种遍历方式,你会多少?
- 【C++简明教程】Python和C++指定元素排序比较
- PG原生解码工具pg_recvlogical的使用-在脑裂时帮我们找回丢失的数据