• 前后端分离-前端跨域-传递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错误提示呢,原因在于服务端加载速度慢,或者资源加载失败,导致浏览器认为服务端没有设置过跨域

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

  • 相关阅读:
    练习 : Flink 自定义 Source & Sink to Redis
    SQL 练习
    HiveSQL 常用函数说明
    Java 开发岗
    练习 : Flink 自定义 sink to hbase
    YOLOv6: a singlestage object detection framework dedicated to industrial applications.
    YOLO with Transformers and Instance Segmentation, with TensorRT acceleration
    About A paper list of some recent Transformerbased CV works
    This is an official implementation for "Swin Transformer: Hierarchical Vision Transformer using Shifted Windows".
    Coming from computer vision and new to transformers? Here are some resources that greatly accelerated my learning.
  • 原文地址:https://www.cnblogs.com/gougou1981/p/14335336.html
Copyright © 2020-2023  润新知