# 浏览器
# BOM和DOM的理解
# 讲一下浏览器的缓存
# Url输入到展示的过程
# 解决跨域
出于浏览器的同源策略限制。
同源策略是一种约定，出于安全考虑，防止数据被其他网站轻松获取。
同源策略会阻止一个域的javascript脚本和另一个域的内容进行交互。
跨域同源（协议、域名、主机、端口号相同），其中任何一个不同都会引起跨域
解决方法：
1、jsonp
优点：简单适用，兼容性好（兼容低版本IE）
缺点：只支持get请求，不支持post请求
原理：动态创建<script>标签，利用<script>的src不受同源策略约束来跨域获取数据
组成：由回调函数和数据两部分组成，回调函数是当响应时应该在页面中调用的函数，回调函数的名字一般在请求中指定。而数据就是传入回调函数中的JSON数据。
2、前端vue开发模式跨域
// vue.config.js中加入proxy设置
devServer:{
port:4399,
host:'localhost',
https:false,
open:true,//vue项目启动时自动打开浏览器
// hotOnly:true,
// overlay:{//让浏览器overlay同时显示警告和错误
// warning:true,
// errors:true
// },
proxy:{
"/api/":{ // 是代理标识，用于告诉node，url前面是/api的就是使用代理的
target:"http://localhost:5520",//目标地址，一般是指后台服务器地址
changOrigin:true,//是否跨域允许开启代理，创建虚拟服务器
pathRewrite:{//作用是把实际Request Url中的'/api'用""代替
"^/api":''
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
3、nginx跨域
nginx反向代理请求到后端允许访问的地址上，就变相解决了跨域，同时也便于管理，和服务器安全问题。nginx可以像一个网关一样代理各种不同的业务需求
location ^~/api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forworded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:5200/;#这里是后端接口地址
}
1
2
3
4
5
2
3
4
5
4、node后端cors
CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resoure sharing）
1
后端服务可以开启跨域允许
const urlArray = [
'http://localhost:4399',
'http://localhost:4400',
'http://127.0.0.1:4401',
'http://localhost:4402',
NGINX_URL,
NGINX_URL_TLS];
app.use(cors({
origin: function (ctx) {
// let url = ctx.header.referer.substr(0,ctx.header.referer.length - 1);
console.log(ctx.url);
console.log('cors',ctx);
// return urlArray
return "https://localhost.cn:443"
},
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
}))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23