当前位置: 首页 > 后端技术 > Node.js

Angular+nodejs+CORS实现跨域不丢cookie实践

时间:2023-04-03 19:50:44 Node.js

想做一个angular+nodejs需要解决的登录问题Angular的4200端口向nodejs的8080端口发送post请求,会导致跨域问题,跨域域,即浏览器无法执行其他网站的脚本。是浏览器的同源策略造成的,也就是浏览器对javascript的安全限制。只有协议、域名、端口完全一致才能认为是同一个域,不同域之间不允许CORS通信。解决跨域问题,jsonp是一种方案,但是CORS更优雅CORS跨域资源共享(Cross-OriginResourceSharing)了解原理请上http://www.ruanyifeng.com/blo...这里只讲nodejs后台代码app。use((req,res,next)=>{res.header("Access-Control-Allow-Origin","*");next();});解决一般的跨域,这样写就够了默认情况下,跨域请求不提供凭据(cookies、HTTP认证、客户端SSL证书等),通过设置withCredentials属性为true,可以指定一个请求应发送凭据。后端收到这种请求时,是不会去检测cookie中的数据的。没有cookiesession,自然是无效的。如果你的请求需要使用cookies,前端angular需要这样写,{withCredentials:true}).subscribe((data)=>{});后端还需要返回cookieres.header('Access-Control-Allow-Credentials',true);//允许Cookieapp.use((req,res,next)=>{//req.headers.originres.header("Access-Control-Allow-Origin","*");res.header('Access-Control-Allow-Credentials',true);//允许Cookieres.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Content-Type,Accept");res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");next();});这样会报错,因为如果有cookie,Access-Control-Allow-Origin不能写"*"可以把Access-Control-Allow-Origin改成访问者的ip+端口,如:res.header("访问控制允许来源","http://localhost:4200");但是访问者是动态的,怎么知道访问者的ip,req.headers.origin就是访问者的ip和端口的最终写法app.use((req,res,next)=>{//如果需要使用cookies,不能写*,必须写特定域,像这样res.header("Access-Control-Allow-Origin",req.headers.origin);res.header('Access-Control-Allow-Credentials',true);//允许Cookieres.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Content-Type,Accept");水库标头(“访问控制允许方法”,“PUT,POST,GET,DELETE,OPTIONS”);下一个();});