AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors
https 协议 默认端口号 443
http 协议 默认端口号 80
同源策略
由网景公司提出的——浏览器 的
为了浏览器安全而生
同源策略： 协议、域名、端口号 必须完全一致
违背同源策略，就是跨域
跨域问题只存在于 AJAX 中____浏览器的 AJAX 引擎检测出来的问题____绕开这个引擎
由于跨域，直接导致无法获取响应数据
1. jsonp 的跨域请求解决方案
由于 普通标签 没有跨域问题，所以利用 <script > 标签 来发送 跨域请求
利用 <script> 标签 能够跨域，且请求到资源后直接执行
优势：
只能发 get 请求
兼容性很好
1. 创建 script 标签
let script = document.createELement("script");
2. 设置响应成功的 全局回调函数
window.getData = function(server_info){
console.log(server_info); // 直接打印 接收到的 响应数据
};
3. 设置 script 的 src 属性
script.src = 'http://localhost:3000/jsonp?callback=getData';
4. 将 script 添加到页面中生效
document.body.appendChild(script);
5. 服务器端 ajax.js
app.get('', ()=>{
const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据
response.send(`${callback}(${JSON.stringify(data)})`);
// getData(name: 'postResponse', age: 18) // 被 浏览器 请求过去，然后执行了。简介获取了响应数据
// 必须要 将 对象转化为 JSON 数据，然后被浏览器 解析成 字符串。否则报错
});
实例源代码
- node 服务器 index.js
const express = require('express'); const app = express(); app.use(express.static('public'));
app.use(express.urlencoded({extended: true})); // 原生 ajax 的 get 路由
app.get("/jsonp", (request, response)=>{
//获取请求参数
const {callback} = request.query; const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据 response.send(`${callback}(${JSON.stringify(data)})`);
// getData(name: 'postResponse', age: 18)
// 被 浏览器 请求过去，然后执行了。间接获取了响应数据
// 必须要 将 对象转化为 JSON 字符串数据，然后被浏览器 解析成 JSON 对象。否则报错
}); /**************** 端口号 3000, 启动服务器 ***************/
app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/jsonp.html\n\t\tHunting Happy!'));- 浏览器前端
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击发送jsonp的跨域请求</button>
<script type="text/javascript">
document.getElementById('btn').onclick = function () {
/*
jsonp：
工作原理:
利用script标签能够跨域的特性解决跨域的
特点：
1. 只能发送get请求
2. 兼容性好
*/
// 1. 创建script标签
let script = document.createElement('script'); // 2. 设置响应成功的全局回调函数
window.getData = function (data) {
console.log(data);
}; // 3. 设置script的src属性
script.src = 'http://localhost:3000/jsonp?callback=getData'; // 4. 将script添加到页面中生效
document.body.appendChild(script);
}
</script>
</body>
</html>
2. cors 官方解决方案
官方提供的跨域问题解决方案
前端不必做任何事，在服务器端设置一个响应头即可
注意：
支持所有请求方式
兼容性差，
access-control-allow-origin
app.get('/cors', (request, response)=>{
response.set('access-control-allow-origin', '*'); // 允许所有请求地址跨域
response.send({"name":'corsResponse', age: 22});
});
- 实例源代码
- node 服务器 index.js
const express = require('express'); const app = express(); app.use(express.static('public'));
app.use(express.urlencoded({extended: true})); // 原生 ajax 的 get 路由
app.get('/cors', (req, res) => {
/*
cors 是官方提供的解决跨域问题的一种方案
特点：
1. 所有请求方式都支持
2. 兼容性较差
使用：
设置一个响应头 access-control-allow-origin
*/
// res.set('access-control-allow-origin', '*'); //允许所有请求地址跨域
res.set('access-control-allow-origin', 'http://localhost:3000/cors'); //允许当前请求地址跨域 res.send({name: 'jack', age: 18});
})； /**************** 端口号 3000, 启动服务器 ***************/
app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/cors.html\n\t\tHunting Happy!'));- 浏览器 前端代码 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>官方 cors 解决跨域问题</title>
</head>
<body>
<button id="btn">点击按钮发送ajax请求</button>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$('#btn').click(function () {
$.get('http://localhost:3000/cors', function(server_info){//成功的回调函数
console.log(server_info);
})
})
</script>
</body>
</html>
AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors的更多相关文章
- 同源策略引发对跨域jsonp跨域的理解
一,同源策略其实网络的安全基石,既:http://www.baidu.com:80协议(http或者HTTPS或者ws或者wss).域名(www.baidu.com).端口(默认80,可以不写 htt ...
- jsonp突破同源策略，实现跨域访问请求
跨域访问问题,相信大家都有遇到过.这是一个很棘手的问题.不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案.最近我又接触到了这个问题,解决的途径是ajax+jsonp. 说到这个问题,不得不说一 ...
- jsonp突破同源策略，实现跨域訪问请求
版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...
- 学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）
一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...
- 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...
- 小结ajax中的同源和跨域 jsonp和cors
网上的同源和跨域一般都比较复杂,最近也稍微总结了一下: 所谓同源,是浏览器的一种安全机制,作用在于保护网页数据的安全,不同源的网页之间不允许cookie dom ajax等行为 同源的条件:1.协议相 ...
- 跨域访问 - 跨域请求 同源策略概念对跨域请求的影响 及几种解决跨域请求的方法如 jsonp
为什么会设置同源策略 > 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核 心也最 基本的安全功能,如果缺少了同源策略,则浏览 ...
- 浏览器同源策略与ajax跨域方法汇总
原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...
- 同源策略和Ajax跨域访问
1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议 ...
随机推荐
- I/O模型
目录: IO模型 阻塞IO 非阻塞IO IO多路复用 异步IO 总结: 1.阻塞IO模型 多线程 多进程 线程池 进程池 全是阻塞IO 2.非阻塞IO 协程是一种非阻塞IO 1.setblocking ...
- unix域字节流回射程序
一.服务端程序 #include <stdio.h> #include <errno.h> #include <stdlib.h> #include <uni ...
- shell ip变量加法运算
#!/bin/bash for ip in `cat a.txt`;do a=`echo $ip|awk -F '.' '{print $1}'` b=`echo $ip|awk -F '.' '{p ...
- IN-子查询
为什么需要子查询? 现实中,很多情况需要进行以下条件的判断 集合成员资格 某一元素是否是某一个集合的成员 集合之间的比较 某一个集合是否包含另一个集合 集合基数的测试 测试集合是否为空 测试集合是否存 ...
- Redis和memcahce的区别【转】
先给大家讲一个基本知识点:数据库分类大致分为两类,关系型数据库和非关系型数据库.如果详细区分的话,还可以继续分下去. Redis不仅仅是缓存数据库 面试的时候,很多人会问,Redis和memcahce ...
- git提交忽略某些文件或文件夹
记得第一次用 github 提交代码,node_modules 目录死活传不上去,哈哈哈,后来才知道在 .gitignore 文件里设置了忽略 node_modules 目录上传.是的, .gitig ...
- NYOJ
爬行的蚂蚁 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 有N只蚂蚁以每秒1cm的速度在长为Lcm的竿子上爬行.当蚂蚁爬到竿子的端点时就会掉落.由于竿子太细,两只蚂 ...
- 【原创】大叔经验分享（43）logstash设置jdbc_default_timezone后报错
logstash6.6.0-6.6.2版本使用jdbc input plugin时如果设置了jdbc_default_timezone,会报错: { 2012 rufus-scheduler inte ...
- SQL入门(1): 创建/查询/更新/连接/视图/SSMS简介
本文介绍SQL的基本查询语句 (1) select... from * 表示全部, 选择的东西还可以进行简单的运算, 可以列别名 select * from student; -sage from ...
- synchronized 是可重入锁吗？为什么？
什么是可重入锁? 关于什么是可重入锁,我们先来看一段维基百科的定义. 若一个程序或子程序可以“在任意时刻被中断然后操作系统调度执行另外一段代码,这段代码又调用了该子程序不会出错”,则称其为可重入(re ...