同源策略 :

什么是同源策略 ?

+ 同源策略是 浏览器 给出的关于网络安全方面的一个要求(约束)

+ 约定了, 请求方和目标方地址必须要保证 传输协议域名端口号 完全一致

+ 当你在发送请求的时候

+ 如果打开页面的完整地址和接受服务器的完整地址

=> 只要传输协议或者域名或者端口号有任意一个不一样

=> 就叫做触发了 同源策略

=> 当你触发同源策略以后, 浏览器不允许你获取该服务器返回给你的数据

同源 : 传输协议和域名和端口号都完全一样

非同源 : 传输协议和域名和端口号其中有任意一个不一样

跨域请求 :

** 跨域请求 **

+ 当请求触发了 同源策略

+ 并且我们还需要请求非同源服务器的数据的时候

+ 我们管触发了 同源策略 的请求叫做 跨域请求

跨域请求的常见解决方案 :

1. jsonp

jsonp 的实现方式 :

+ 利用 script 标签的 src 属性, 去请求一个非同源的服务器地址

+ 要求: 服务器给出的内容必须是一段合法的可以执行的 js 代码

+ 要求: 服务器给出的 js 代码需要是一个 '函数名(数据)' 的格式

script 标签 :
+ 一个引入外部文件的标签
+ 这个标签的意义, 默认会把引入的所有内容当做 js 代码来执行
+ script 标签的意义 :
=> 就是引入一个外部文件
=> 不管文件名和后缀是什么
=> 只是读取这个文件内部的内容
=> 把读取到的内容当做 js 代码来执行

src 属性 :
+ 作用: 标注引入一个外部资源的连接路径
+ 特点:
=> src 属性是 W3C 标准给出专门用来引入外部资源的属性
=> 通过 src 属性引入的外部地址,浏览器不会去管 src 引入的内容是否是跨域的
=> 所以不受浏览器同源策略的影响

jsonp 技术是一个和 ajax 技术没有关系的一种跨域方式
+ 利用 script 标签和 src 属性
+ 利用 script 标签会把请求回来的内容当做 js 代码执行
+ 利用 src 属性不受同源策略的影响
+ 要求: 后端返回的必须是个合法的 js 格式字符串

2. cors(跨域资源共享)

cors(跨域资源共享) :

+ 和前端没有任何关系的一种跨域请求方案

+ 前端: 该如何发 ajax 请求, 就如何发

+ 由后端开启 cors 配置

后端开启 cors 配置 :

<?php// 跨域// 在这里告诉浏览器, 你别管, 我愿意给他数据// 告诉浏览器, 哪些域名可以请求我// 表示允许的域名, * 表示通配header("Access-Control-Allow-Origin: *");// CORS// 告诉浏览器, 允许哪些请求方式header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");// 告诉浏览器, 允许哪些额外的请求头信息header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid,authorization');echo 'hello world';
?>

3. proxy(代理)

proxy(代理) 进行跨域 :

+ 代理方式跨域: 任何一台服务器都可以进行代理的设置和配置

+ apache 服务器

=> 代理 http 请求地址免费

=> 代理 https 请求地址需要证书

+ nginx 服务器

=> 代理 http 和 https 都是免费的

=> 注意 : 请求路径一定要是全英文 , 不要出现汉字

使用小皮配置代理 :

配置代理 :

1. 打开小皮面板

=> 把服务器从 apache 切换到 nginx

2. 打开小皮面板

=> 左侧边栏点击设置

=> 点击配置文件

=> 选到 vhosts.conf 文件

=> 点击 0localhost_8080

3. 找到 server 的闭合括号

=> 在闭合括号的上一行, 进行代码配置的书写

location /xx {

proxy_pass 你请求跨域的地址;

}

/xx: 你随便书写的, 叫做代理标识符

proxy_pass 后面的地址, 就是你请求的时候会跨域的地址

4. 一定要重启服务器

前端 :

    const xhr = new XMLHttpRequest()// 注意: 当你发送请求的时候, 请求地址 一定要直接书写 代理标识符// 这样服务器才会发现, 你请求的是一个 代理标识符, 我确实配置过// nginx 就会帮你把请求转发到 proxy_pass 配置的地址了xhr.open('GET', '/xhl')xhr.onload = function () {console.log(xhr.responseText)}xhr.send()

后端 :

<?phpecho 'hello world';?>

浏览器的同源策略和跨域请求_学习版相关推荐

服务器安全：浏览器同源策略与跨域请求、XSS攻击原理及防御策略、如何防御CSRF攻击
主要包括浏览器同源策略与跨域请求 XSS攻击原理及防御策略如何使用SpringSecurity防御CSRF攻击 CC/DDOS攻击与流量攻击什么是SSL TLS HTTPS? 一.浏览器的同源策 ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
浏览器的同源策略与跨域问题的解决方案
浏览器的同源策略与跨域问题的解决方案参考文章: (1)浏览器的同源策略与跨域问题的解决方案 (2)https://www.cnblogs.com/yanggb/p/10735763.html 备忘一 ...
同源策略和跨域请求解决方案
一.一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: ...
浏览器的同源策略及跨域解决方案
同源策略一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示 ...
浏览器同源策略以及跨域请求时可能遇到的问题
跨域请求基础知识浏览器的同源策略浏览器的源指的是协议://域名:端口这样的URL组合.我们首先要明确几点 www.foo.com 和 foo.com 是不同域 www.foo.com 和 ww ...
浏览器的同源策略与跨域
本文所有案例在本地址都可找到:https://github.com/dancingZhou/sameOrigin/tree/dev 什么是同源策略两个页面地址中的协议.域名和端口号一致,则表示同源. ...
浏览器同源策略及跨域的解决方法
浏览器同源策略及跨域的解决方法参考文章: (1)浏览器同源策略及跨域的解决方法 (2)https://www.cnblogs.com/laixiangran/p/9064769.html 备忘一下.
Django - - 进阶 - - 同源策略和跨域解决方案
目录同源策略一个源的定义同源策略是什么举个例子 jQuery中getJSON方法 JSONP应用 1, 同源策略 1.1 一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两 ...

浏览器的同源策略和跨域请求_学习版

同源策略 :

跨域请求 :

跨域请求的常见解决方案 :

1. jsonp

2. cors(跨域资源共享)

3. proxy(代理)

浏览器的同源策略和跨域请求_学习版相关推荐

最新文章

热门文章