跨域

同源策略
+ **同源策略是浏览器给的一个行为**
+ 当你再发送请求的时候, 会涉及到两个地址
1. 打开当前页面的地址
2. 你要请求的地址
+ 两个地址中的 端口号 域名 传输协议
=> 只要由任意一个不一样, 就是非同源请求
=> 就会触发浏览器的同源策略
=> 不允许你获取这个服务器上的数据

触发了同源策略的请求我们叫做 跨域请求
+ 私人: 请求别人家的服务器
+ 第一:
=> 真实开发环境
=> 页面(html, js, css, 静态资源) 是在一个服务器上
=> 所有的数据, 数据库, 在一个服务上
+ 第二:
=> 真实开发环境
=> 我自己不具备条件, 购买别人家服务器服务
=> 美团: 地图功能
=> 新闻: 买新浪的接口, 腾讯的接口

解决浏览器不允许请求别人家服务器的情况
+ 基于 http 协议
1. jsonp
2. cors
3. 代理

jsonp 跨域
+ 因为浏览器的同源策略, 不允许发送跨域的 ajax 请求
+ 我们使用 jsonp 手法来实现跨域请求

script 标签
+ script 标签可以执行 js 代码
=> script 标签有一个属性叫做 type="text/javascript"
=> 就会把里面的代码当作 js 来解析
=> 当你不写 type 属性的时候, 默认是 text/javascript
+ src 属性
=> src 是引入外部资源的属性
=> 不受同源策略的影响
+ 当上面两个加再一起
=> 只要你引入任何一个内容, 都会被当作 js 代码来解析

jsonp 的核心
+ 利用 script 标签的 src 属性
+ 去向一个非同源的服务器请求数据
+ 只要这个服务器能给我返回一个字符串
+ 我就会把这个字符串当作 js 代码来执行

jsonp 请求数据
+ 要求服务器返回一个 函数名() 这样的字符串
+ 要求提前准备号一个函数
+ 要求前端告诉后端你准备好的函数名是什么
=> 再发送请求的时候, 以参数的形式告诉后端
=> 我准备好的函数名叫做什么

jsonp 常见的面试题
1. jsonp 原理
=> src 不受同源策略影响
=> script 标签会把请求的内容当作 js 代码来执行
2. jsonp 的返回值
=> 字符串, 函数名() 形式的字符串
=> 一段可以执行的 js 代码字符串
3. jsonp 的优缺点
=> 优点
-> 绕开了同源策略, 实现跨域请求
-> 方便, 因为是以 script 标签外部资源的形式请求
=> 缺点
-> 不好做安全防范

跨域请求
+ 什么是同源策略
=> **同源策略是浏览器给的机制**
=> 当你再发送一个请求的时候
=> 打开页面的地址和请求地址中, 端口号 传输协议 域名, 有任意一个不一样
=> 就是触发了同源策略
=> 浏览器不允许你请求这个服务器的数据
+ 什么是跨域请求
=> 当触发了同源策略以后, 我还需要获取该服务器的数据
=> 这种请求叫做跨域请求
+ 跨域请求的解决方案
=> 基于 http 协议的跨域方案
1. jsonp
-> 利用了 src 属性不受同源策略的影响
-> 利用了 script 标签会把请求回来的内容当作 js 代码来执行
-> 要求服务器返回一段可以执行的 js 代码( 函数名(数据) )
-> 要求前端提前准备好这个被执行的函数
-> 要求前端以参数的形式把这个被执行函数的函数名传递到后端
2. 代理
-> 利用一个正向代理的机制来实现
-> 任何一台服务器都可以做代理
=> apache 服务器 代理 http 协议的是免费的
=> apache 服务器 代理 https 协议需要证书的
=> 我们配置代理使用 nginx 服务器来配置代理
-> 配置
=> phpstudy 切换到 nginx 服务器
=> 其他选项菜单 -> 打开配置文件 -> nginx.conf
=> 找到当前服务器的 server 标签对, 找到闭合标签的上一行书写代理配置
=> location = /xx {
proxy_pass 地址;
}
-> /xx: 代理标识符, 当你请求 /xx 的时候, nginx 会发现你在请求代理标识符
就会自动帮你转发你的请求到 proxy_pass 后面的地址
-> proxy_pass: 代理目标地址
=> 只要配置文件被修改了, 那么就要重启服务器
3. cors - 跨域资源共享
=> 因为跨域请求, 不是请求发不出来
=> 实际上: 请求已经发送了, 而且到了服务器了, 响应页回到浏览器了
=> 但是浏览器判断了是非同源位置, 不允许你使用服务器给回的数据
=> 由服务器告诉浏览器一个事情, 这个域名我允许请求我的内容
header("Access-Control-Allow-Origin:*");
header("Access-Control-Request-Methods:GET, POST");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');