请求的完整地址
=> http://localhost:80/xxx.html
=> 一个请求需要和两个路径相关
> 一个打开页面的路径
> 一个请求地址的路径
同源策略
=> 同源策略是浏览器给的网络安全防御方案
=> 当 请求地址 和 接收地址 的传输协议, 端口号, 域名 有任意一个不一样,就是触发了浏览器的同源策略
=> 我们将触发了同源策略的请求叫做 跨域请求
=> 因为触发了同源策略, 浏览器不允许你获取这个服务器的数据
跨域请求的常见解决方案
1. jsonp
+ 利用 src 属性不受同源策略的影响
+ 利用了 script 标签会把所有请求回来的内容当做 js 代码来执行
+ 要求服务端返回一段字符串 '函数名(数据)'
+ 需要服务器改动代码
+ 只支持 GET 请求
+ 发送的不是 xhr 请求
<script>
const ul = document.querySelector('ul')
const inp = document.querySelector('input')
inp.addEventListener('input', function () {
// 2. 拿到文本框输入的内容
// trim() 去除首位空格
const value = this.value.trim()
if (!value) return
// 3. 准备发送请求
// 动态创建 script 标签
const script = document.createElement('script')
// 准备一个请求地址
// wd 这个参数要换成我文本框里面输入的内容
const url = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1446,32857,33124,33061,32973,33099,33101,32962,22159&wd=${value}&req=2&csor=1&cb=bindHtml&_=1605768936993`
script.src = url
// 把 script 标签插入到页面里面
document.body.appendChild(script)
// 当 script 标签插入到页面里面的时候, 等到响应回来
// 就会调用 bindHtml 的方法
// 我需要提前准备
// 函数写在全局, 还是写在这个事件里面 ?
// 全局: 必须写在全局
// 因为你相当于在页面里面多加了一个 script 标签
// script 标签里面的内容就是 bindHtml(xxx)
// 使用 script 标签的目的是为了把请求发送出去
// 当 script 标签插入到页面里面的挥手, 请求已经发送出去了
// 此时, script 标签已经没有用了
script.remove()
})
</script>
2. cors
+ 由 服务端 开启 跨域资源共享
+ 由服务器告诉浏览器, 我允许哪些域名请求我的内容
+ 浏览器就不会拦截你的请求了
+ 前端无法控制能不能跨域 只能由后端开启
Access-Control-Allow-Origin: * //该字段表明可供那个源跨域
Access-Control-Allow-Methods: GET, POST, PUT // 该字段表明服务端支持的请求方法
Access-Control-Allow-Headers: X-Custom-Header
3. 代理
+ 使用正向代理的方式, 以代理服务器帮我们请求目标服务器的数据
+ 目前使用的是 nginx 服务器进行代理
+ 需要书写代理配置在 nginx.conf 文件
lcoation = /xx {
proxy_pass 目标地址;
}
+ 请求的时候, 需要请求代理标识符
代理跨域
+ 利用正向代理达到跨域的目的
+ apache 服务器可以代理
=> 代理 http 请求是免费的
=> 代理 https 是需要证书
+ nginx 服务器可以代理
=> 代理是免费的
+ 代理配置(不管用什么,找到配置文件)
=> 打开配置文件
=> nginx-conf
=> 找到 http {} 内部的 server
=> 找到 server {} 的 结束括号
=> 在结束括号的上一行书写代理配置
代理标识符
location = /lvs { proxy_pass http://127.0.0.1:80/proxy.php;} /代理标识符 {目标地址}
=> 保存退出, 重启服务器
=> 当你发送请求的时候, 你的请求地址写的是 代理标识符
-> nginx 服务器就会发现, 会帮你把这个请求转发给你的 目标地址