前端跨域时需要携带 Cookie 的情况(处理方法)
【前端携带 Cookie 跨域时,请求失败的情况,后端拿不到该 Cookie】
项目是 Vue + axios + nginx ,项目开发中,遇到了一个问题,就是前端请求了后端的某个接口,后端通过这个接口要重定向到另一个网页,这就涉及到了跨域问题,而该项目需要携带后端存回来的一个Cookie,把这个Cookie放在请求里,再返回给后端,用来判断该Cookie是否存在或是否正确。
但是此时出现了一个问题,就是Cookie无法携带在请求里,后端无法正常拿到该Cookie,导致请求失败,无法获得想要的结果。因为这个请求存在跨域,而Cookie在跨域请求中,需要进行设置,设置内容如下:
前端的 axios 需要配置一个属性,该属性控制“跨域是否携带Cookie”: axios.defaults.withCredentials = true;
前端设置了withCredentials为true后,必须后端也配合进行设置
后端设置:Access-Control-Allow-Credentials 设置为 true
后端不能把 Access-Control-Allow-Origin 设置为 “” 或 *,而要设置为客户端发送请求时的IP地址。
ps: 关于指定域名 可以在后端用个array
类似的存一个白名单域名列表
如果有请求 先判断Origin
是否在白名单里 然后再动态设置Access-Control-Allow-Origin
Nginx 也可以进行跨域请求的设置: set $origin '*'; if ($http_origin) { set $origin "$http_origin"; } add_header Access-Control-Allow-Origin "$origin"; add_header Access-Control-Allow-Credentials "true"; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'Origin,Access-Control-Request-Headers,Access-Control-Allow-Headers,DNT,X-Requested-With,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-M odified-Since,Cache-Control,Content-Type,Accept,Connection,Cookie,X-XSRF-TOKEN,X-CSRF-TOKEN,Authorization';
上面这段代码,写在你需要跨域的代理 location 里。
简单总结一下:
一般的项目,出现跨域在后端设置就行,前端中如果用到 withCredentials: true
,那么后端需要设置 response.setHeader("Access-Control-Allow-Credentials", "true"),
才能使 Cookie 携带上来,同时,Access-Control-Allow-Origin
这个白名单需要设置当前前端访问时的浏览器上的域名或IP。
如果项目打包部署上线后,所有访问地址都是同一个域名IP,那么这种跨域情况就不会出现。