TP6验证码 session跨域

3 篇文章 0 订阅
1 篇文章 0 订阅

记录一次自己项目中遇到的session跨域问题
项目框架: TP6.0
功能需求: 后台登录时需要添加验证码验证,前后端分离,不同域名。
点我进入官方手册

安装验证码扩展

点我查看验证码安装和使用详情

开启中间件
#文件路径:app/middleware.php
<?php
// 全局中间件定义文件
return [
    // 全局请求缓存
    // \think\middleware\CheckRequestCache::class,
    // 多语言加载
    // \think\middleware\LoadLangPack::class,
    // Session初始化
    #开启session
    \think\middleware\AllowCrossDomain::class,
    #开启跨域
     \think\middleware\SessionInit::class,
];
配置cookie

配置cookie的原因是设置session的作用域

#文件路径:config/cookie.php
<?php
// +----------------------------------------------------------------------
// | Cookie设置
// +----------------------------------------------------------------------
return [
    // cookie 保存时间
    'expire'    => 0,
    // cookie 保存路径
    'path'      => '/',
    // cookie 有效域名
    'domain'    => 'baidu.com',
    //  cookie 启用安全传输
    'secure'    => false,
    // httponly设置
    'httponly'  => false,
    // 是否使用 setcookie
    'setcookie' => true,
];

比如你配置的前端是m.baidu.com,api是api.baidu.com,那这个作用于就是baidu.com。
作用域只能配置同级或低于当前等级的域名,比如配置的是baidu.com,那在baidu.net中是不生效的

如果上面配置好以后还是来不起,那么只能通过前端协助把session_id传到后端

配置session

配置session主要是配置前端传输session_id的参数键名
前端传输session_id只能通过GET方式传输,POST或head头传输TP框架获取不到,除非自己重写TPsession初始化,改变获取session_Id的方式

return [
    // session name 这个不用动,一般默认的就是PHPSESSID
    'name'           => 'PHPSESSID',
    // SESSION_ID的提交变量,解决flash上传跨域
    #前端传输的参数键名
    'var_session_id' => "session_id",
    // 驱动方式 支持file cache
    'type'           => 'file',
    // 存储连接标识 当type使用cache的时候有效
    'store'          => null,
    // 过期时间
    'expire'         => 1440,
    // 前缀
    'prefix'         => '',
];

到这一步骤基本上都能来得起,如果还是来不起,欢迎解决以后留言交流!

### 回答1: Vue是一种流行的前端框架,而Spring Boot是一种流行的后端框架。在使用Vue与Spring Boot的组合时,可能会遇到跨域的问题,特别是在涉及到会话(Session)管理时。 在传统的Web应用中,会话通常是通过在浏览器端存储会话标识符(Session ID),并将其发送到服务器来验证用户身份和状态的方式来管理的。跨域问题出现在当Vue应用与Spring Boot应用部署在不同的域或端口上时,浏览器会阻止前端应用发送跨域请求,以保护用户的安全和隐私。 为了解决跨域的问题,我们可以采取以下措施: 1. 在Spring Boot应用中配置跨域请求支持。可以通过使用CORS(Cross-Origin Resource Sharing)配置来允许来自Vue应用的跨域请求。在Spring Boot的配置文件中,可以添加如下配置来允许Vue应用的跨域请求: ``` @Configuration public class CorsConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") // Vue应用的地址 .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*") .allowCredentials(true); } }; } } ``` 2. 在Vue应用中设置代理。Vue提供了一个配置文件vue.config.js,我们可以使用该文件来设置代理,将所有的API请求转发到Spring Boot应用的地址。可以在vue.config.js中添加如下配置: ``` module.exports = { devServer: { proxy: { '^/api': { target: 'http://localhost:8081', // Spring Boot应用的地址 ws: true, changeOrigin: true } } } } ``` 以上配置将会把以/api开头的请求转发到Spring Boot应用的地址。 通过以上两种方式,我们可以解决Vue与Spring Boot之间的跨域问题,并正常进行会话管理。在这种配置下,Vue应用将能够向Spring Boot应用发送跨域请求,并在其中进行会话管理。 ### 回答2: Vue和Springboot是两个常用的开发框架,Vue用于前端开发,而Springboot用于后端开发。在开发过程中,可能会遇到前端Vue与后端Springboot之间的跨域问题。下面将以300字回答Vue与Springboot Session跨域的问题。 首先,跨域(Cross-Origin Resource Sharing,CORS)指的是在浏览器中,由于安全策略的限制,不同域名之间进行数据交互时会出现的问题。Vue和Springboot之间的跨域问题可以通过设置后端的响应头来解决。 在Springboot中,可以通过在后端Controller中使用@CrossOrigin注解来设置允许跨域请求的域名。例如,可以在Controller的类上方加上@CrossOrigin注解,并指定允许访问的域名,如@CrossOrigin(origins = "http://localhost:8080")。这样就可以允许Vue前端通过http://localhost:8080域名进行跨域请求。 另外,在Vue中也可以通过配置代理来解决跨域问题。在Vue的配置文件中(例如vue.config.js),可以设置devServer的proxy选项,将跨域请求转发至后端项目的URL。例如,可以将'/api'的请求代理到Springboot的URL上,以解决跨域问题。具体的配置代码如下: module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', ws: true, changeOrigin: true } } } } 以上是解决Vue和Springboot Session跨域问题的两种常见方法。无论是通过在Springboot后端设置响应头允许跨域访问,还是通过在Vue前端配置代理转发请求,都可以解决两者之间的跨域问题,确保数据的正常交互。 ### 回答3: Vue与Spring Boot是一个常用的前后端分离的组合,它们之间确实存在跨域问题。当Vue项目与Spring Boot项目同时运行在不同的端口或域名下时,浏览器会根据同源策略(Same Origin Policy)限制跨域访问。 为了解决这个问题,我们可以通过在后台配置允许跨域访问的方式。在Spring Boot的Controller类上添加`@CrossOrigin`注解,可以允许指定的域名或端口进行跨域访问。例如,我们可以将注解添加在Controller类上,如下所示: ```java @CrossOrigin(origins = "http://localhost:8080") @RestController public class ExampleController { // ... } ``` 在上面的例子中,我们允许`http://localhost:8080`这个域名进行跨域访问。你可以根据实际情况修改域名和端口。 另外,为了确保session跨域访问正常工作,需要在Vue项目中使用`axios`等HTTP请求库时设置`withCredentials`为`true`。这样可以允许携带cookie信息进行跨域请求,以保持session的一致性。你可以在Vue项目的请求配置中添加以下代码: ```javascript // 创建axios实例 const service = axios.create({ // ... withCredentials: true // 允许携带cookie信息 }) // 请求拦截器 service.interceptors.request.use( config => { // ... return config }, error => { // ... return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { // ... return response }, error => { // ... return Promise.reject(error) } ) export default service ``` 以上就是Vue与Spring Boot解决session跨域问题的一种常见方式。通过在后台允许跨域访问,并在前端设置`withCredentials`为`true`,可以解决Vue与Spring Boot session跨域的问题。当然,还可以使用其他方式来解决跨域问题,具体的选择可以根据实际需求和项目情况进行决定。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值