同源策略?
同源策略,它是由Netscape提出的一个著名的安全策略,是浏览器最核心最基本的安全功能,web就是构建在同源策略的基础之上的。
源:域名,协议,端口
三者都必须相同,浏览器才会同意访问服务器,有一个不同,浏览器就会报异常,提示拒绝访问
不同源的数据怎么访问呢? -- 跨域访问
跨域
跨域就是不受同源策略影响,访问不同源数据。
跨域的方式?
实现跨域有三种方式:
一、cors跨域
这种跨域方式是在后端完成的,在后端程序中写入相应代码声明允许这个页面的访问,就可以实现跨域
通俗来说,就是后端的服务器都允许你访问了,我这浏览器还管什么劲,就去呗!!
二、proxy跨域
也叫服务器代理
主要是在服务器配置中添加代码:
proxy /代理名称 {
proxy_pass '请求的URL地址';
}
注意:这里一定要加 分号
在HTML页面中请求:
async function fun(){
let res = await 数据请求函数('/代理名称','get','携带的参数和callback函数','json')
}
注意:在HTML里面,请求函数中写URL地址的那个参数填写 /代理名称,这个斜线不能省略,这个数据请求函数以及实参是根据自己封装的函数而定,这个只是大致的参考
三、jsonp跨域
主要就是通过script标签对象的src属性来设置,
在请求访问时,创建一个 script标签,给这个script标签对象添加src属性,属性值是URL地址和它携带的参数以及具体发出请求执行代码的callback函数,将这个script放入页面body中,最后删除这个导入的script标签对象就完成了
具体代码:
// 创建script标签
const s = document.createElement('script')
// 设置src属性
s.setAttribute('src', `URL地址以及携带的参数和callback函数`)
// 将script标签放入body中
document.body.appendChild(s)
// 删除 导入后的script标签
document.body.removeChild(s)
注意:只能接受 get 请求,不能接受 post 请求