1、同源策略
协议、域名、端口号一致就称为同源。
同源策略是浏览器的一种安全策略。
2、实现跨域的4种方式
- 使协议、域名、端口号一致
- cors
- jsop
- 代理
这四种中只有第四种代理不需要后端参与,前端就能搞定。
1、使用cors解决跨域
有两种方式
- 第一种,设置头文件信息
app.all表示所有的请求,都会走这个中间件处理。
app.all("*",function(req,res,next){
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
}
- 第二种,使用cors插件(本质还是设置头文件信息)
先安装
npm install cors
在总入口文件中
const cors = require("cors")
app.use(cors())
然后此后端就允许跨域了。
2、使用jsop跨域
利用script标签中的src不受同源策略限制的特点,使用src连接接口获取数据。返回来的时候相当于把数据传了进去,并执行了。
前端把回调函数传给了后端,
后端接收到回调函数,并且把结果拼接了进去。
jsonp只能发送get请求,不支持post,put,delete请求
总结,jsonp基于两点实现跨域
- script标签的src可以访问任何url资源,不受同源策略限制;
- 如果访问的资源包含JavaScript代码,那么在下载下来后会自动执行。
3、代理
前端和服务器端的请求只能通过ajax,所以会存在跨域,但服务器请求服务器没有跨域问题的
所以代理的原理就是:前端访问自己的服务器,不存在跨域,然后自己的服务器在访问目标服务器。
服务器请求服务器用node的内置request模块。
let request=require('request')
request('http://www.baidu.com',(err,res,body)=>{
console.log(err)
console.log(res)
console.log(body)
})
- res是响应
- body是返回的数据体,res对象中包含body