目前大多数web项目都采用前后端分离的方式,这样前端和后端代码将部署在不同服务器或者统一服务的不同端口,由于浏览器的同源策略,前后向后端发送ajax请求将会出现跨域
1.一般解决情况,(express框架为例)
通过express中间件,允许其跨域
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
next()
}
一般的情况上面设置已经够了
2.处于安全性考虑,往往有时候我们会在请求的时候设置token或cookie等验证身份,一般都将token放在请求头
如下:
headers:{
'Authorization': token
}
这时候如果只像上面那样简单设置,还是会出现跨域,因此还需要配置自定义请求头跨域
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
//Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
res.header('Access-Control-Allow-Headers', 'Authorization')
res.header('Access-Control-Allow-Methods', '*')
next()
}
上述配置完就大功告成啦!
本文探讨了前后端分离架构下,如何解决浏览器同源策略导致的跨域问题。以express框架为例,介绍了设置跨域请求头和自定义请求头的详细步骤,确保前后端正常交互。
1097

被折叠的 条评论
为什么被折叠?



