前后端分离-前端跨域-传递cookie时碰到的坑!

参考文章:https://www.cnblogs.com/nuccch/p/7875189.html

前后端完全分离的项目,前端使用Vue + axios,
使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服务器返回的Cookie:SESSIONID
导致每一个Ajax请求在服务端看来都是一个新的请求,都会在服务端创建新的Session(在响应消息头中设置Set-Cookie:JSESSIONID=xxx)。

实际上,这是浏览器的同源策略导致的问题:不允许JS访问跨域的Cookie。
举个例子,现有网站A使用域名a.example.com,网站B使用域名b.example.com,如果希望在2个网站之间共享Cookie(浏览器可以将Cookie发送给服务器),那么在设置的Cookie的时候,必须设置domain为example.com。

参考地址:https://blog.csdn.net/qq_39611230/article/details/108090828

按照上面老兄弟的文章设置一翻,发现本人的项目还是运行不起来,真是折腾人!

下面说一下解决方案:

对于前后端分离的项目,为了能够解决跨域的问题,大家可能需要设置在前端和后端分别做一些设置。

  • 前端:

复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
import { routerMode } from './config/env'
import './config/rem'
import ViewUI from 'view-design';// gougou ViewUI
import 'view-design/dist/styles/iview.css';// gougou ViewUI
import axios from 'axios'; /* 引入axios进行地址访问*/

Vue.prototype.$axios = axios;
axios.defaults.withCredentials = true;//这行代码是必须的
复制代码
  • 后端:

header('Access-Control-Allow-Origin:' 这里你的前端项目域名,不能为 *);
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET,POST,OPTIONS');
header('P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"');//P3P协议是为了cookie可以实现单点登录

以上两项大多数人都明白。

但本人设置过,愣是不起作用,几经周折,发现根本获取不到后端的session,而且在开发者工具中跟踪发现每个接口返回的PHPSESSIONID都不一样,而且一直在变化。

 最后百度半天,才发现是Mock的问题。最后将require('../src/mock');注释掉,一切正常了!这个坑还是有点大,希望大家不要掉里。

另外一个问题:

前后端分离项目,从服务端加载历史记录有时会出现以下错误:

Access to XMLHttpRequest at 'http://logistics.cn2de.com/admin/v2/inwarehouses?lang=&product_sn=&stock_in_sn=&production_batch=&product_name=&start_time=2021-04-13&end_time=2021-05-13&warehouse_sn=&per_page=20&page=1' from origin 'http://znwl.cn2de.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

服务端为Laravel,而且已经在在appHttpKernel.php中设置过了CORS跨域,如下:

// 全局跨域
BarryvdhCorsHandleCors::class,

那为什么还会出现No 'Access-Control-Allow-Origin' header is present on the requested resource错误提示呢,原因在于服务端加载速度慢,或者资源加载失败,导致浏览器认为服务端没有设置过跨域

所以还是应该从服务端数据或者页面的加载问题入手。

原文地址:https://www.cnblogs.com/gougou1981/p/14335336.html