跨域在开发中经常会碰到,解决方法也很多。今天来记录一下实际项目中遇到的跨域问题及解决方法。
项目初始功能开发完毕后,准备线上布署。后台布署好后,访问出错。登录成功好再去请求别的接口,直接返回登录页面。(此时页面并没有报跨域的错,不知道为啥)但是在本地环境正常。经过排查,发现线上环境有两个ip
地址和端口。比如前端项目地址是192.168.10.01:8080
,后端接口地址是192.168.10.02:8081
。随即在本地测了一下,前端地址是localhost:8080
,后台地址改为本机ip
地址:192.168.xx.xx:8081
。表现和线上环境一样,登录成功后再去请求别的接口直接返回登录页面。把前端地址也换成本机ip
地址,请求正常。
原因具体分析:
因为后台接口使用了cookie
验证,发请求时,除了登录接口外都要在请求头带上cookie
。后端收到请求后会对请求头检测,如果有cookie
且是正确的就放行,如果没有cookie
或者cookie
超时,后台会重定向到一个无权限接口,然后返回登录页面。上面的问题就是因为cookie
没带过去。
登录成功后,后端会在响应头里设置cookie,set-cookie=xxxxxx
,浏览器会保存此`cookie`。前端只要在请求时开启withCredentials = true
,浏览器在发送请求时会先检测有没有cookie
,有就自动把cookie
加到请求头里。(后端还需设置Access-Control-Allow-Credentials = true
)。这只是浏览器针对同源请求的机制,而我们现在的问题是IP
地址不同,已经是跨源了,跨源请求cookie
是带不去过的。所以就导致了上面的问题。
解决方法:
1、后台可以使用Nginx
转发,使请求是同源。但是项目上线禁止使用Nginx
,悲催!
2、在请求头里添加一个新属性,比如token
,并将cookie
值赋给它。在请求头添加额外属性后,请求就变成了非简单请求,非简单请求要请求两次,第一次是预检请求(options),第二次才是正式请求。因为后端对options
请求没有处理好,导致此方法不可行。
3、在请求参数里统一添加cookie
的值 。比如添加一个属性token,后台拿到参数后将token值放到请求头里的cookie里。
Cookie的属性及说明