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的协议 ...
随机推荐
- DirectX11 With Windows SDK--06 DirectXMath数学库
前言 xnamath.h原本是位于DirectX SDK的一个数学库,但是现在Windows SDK包含的数学库已经抛弃掉原来的xnamath.h,并演变成了现在的DirectXMath.h.其实本质 ...
- INI配置文件的格式
为什么要用INI文件?如果我们程序没有任何配置文件时,这样的程序对外是全封闭的,一旦程序需要修改一些参数必须要修改程序代码本身并重新编译,这样很不好,所以要用配置文件,让程序出厂后还能根据需要进行必要 ...
- 时间序列函数resamlpe详解
resample与groupby的区别:resample:在给定的时间单位内重取样groupby:对给定的数据条目进行统计 函数原型:DataFrame.resample(rule, how=None ...
- MySQL学习6 - 完整性约束
一 介绍 二 not null 与default 三 unique 四 primary key 五 auto_increment 六 foreign key 快速理解foreign key 创建两张表 ...
- Thread和Runnable的区别
Runnable源码 Thread源码 结论 Thread实现了Runnable接口的类,使得run支持多线程. 因类的单一继承原则,推荐使用Runnable接口实现多线程
- 移动端bug集合
移动端软键盘遮挡输入框&IOS移动端点击输入框字体放大&IOS点击闪烁 移动端软键盘遮挡输入框 ——> 转载自: https://www.jb51.net/article/1 ...
- php session的用法
初始 Session: session_start(). 存储 Session 变量:$_SESSION['name']='快聘100'; 调用Session:$name = $_SESSION['n ...
- Codeblock代码提示自动补全（包括结构体成员）
转:https://blog.csdn.net/haibin8473/article/details/79113650
- TCP/IP（五）传输层之细说TCP的三次握手和四次挥手
前言 这一篇我将介绍的是大家面试经常被会问到的,三次握手四次挥手的过程.以前我听到这个是什么意思呀?听的我一脸蒙逼,但是学习之后就原来就那么回事! 一.运输层概述 1.1.运输层简介 这一层的功能也挺 ...
- 用vue 写h5页面-摇一摇
vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...