前后台IP地址不同，跨域请求解决方法

跨域在开发中经常会碰到，解决方法也很多。今天来记录一下实际项目中遇到的跨域问题及解决方法。

项目初始功能开发完毕后，准备线上布署。后台布署好后，访问出错。登录成功好再去请求别的接口，直接返回登录页面。（此时页面并没有报跨域的错，不知道为啥）但是在本地环境正常。经过排查，发现线上环境有两个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的属性及说明