`
hanzhdy
  • 浏览: 28573 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

解决跨域问题[前后端分离,前端使用axios]

阅读更多
问题描述:
前端网址:http://h5.xxx.com,后端网址:http://gateway.yyy.com
前端使用axios发送ajax请求到后端,
后端使用Spring Boot,拦截器中查看到每次请求的session id都不一样,每次response的set-cookie中都包含有"SESSIONID"参数,很明显是因为前端没有把sessionid通过cookie传递给后端。


解决方案
前端请求中增加:
  const obj = Object.assign({}, config, {
    headers,
    withCredentials: true,
    crossDomain: true,
  });


后端拦截器:
  HttpServletResponse servletResponse = (HttpServletResponse) response;
  servletResponse.setContentType("application/json; charset=utf-8");  
  servletResponse.setCharacterEncoding("UTF-8");
  // 特别注意:Access-Control-Allow-Origin值不能为*,而应该是一个具体的值
  // 否则cookie一样传递不过来
  // 这里直接用request.getHeader("Origin"),其实产生的作用跟*基本一致
  servletResponse.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
  servletResponse.addHeader("Access-Control-Allow-Credentials", "true");
  servletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,Cookies");

  if (request.getHeader("Access-Control-Request-Method") != null
    && "OPTIONS".equals(request.getMethod())) {// CORS "pre-flight" request
    servletResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
    servletResponse.addHeader("Access-Control-Max-Age", "7200");
    servletResponse.setStatus(200);
    servletResponse.getWriter().write("OK");
    return;
  }


// Add 2018.03.30
这里面还有一个比较大的坑,我们在做IOS微信公众号测试时仍然发现session id每次不一致的情况,但Android微信是OK的。

原因:h5页面通过ajax访问gateway时,IOS的微信端,是无法写入cookie的。但如果先正常通过IOS微信浏览器访问gateway,正常写入cookie后,h5页面再通过ajax访问gateway,此时是可以携带gateway的cookie(即:IOS微信端浏览器对跨域的cookie,是只读模式)

因此,只需要在h5页面访问gateway之前(或者说登录之前),先在h5中location.href指向gateway,再由gateway redirect回来(这个时候,gateway的cookie已经正常写入了)后面的访问就能正常携带cookie了


response.sendRedirect(request.getHeader("referer"));


参考资料:https://blog.csdn.net/zhx19920405/article/details/51417250
感谢大神分享的解决方案
分享到:
评论

相关推荐

    解决Nuxt使用axios跨域问题

    而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题,需要安装 @nuxt...

    Vue 3.x+axios跨域方案的踩坑指南

    在现代Web开发中,前后端分离已成为一种常见模式。前端使用Vue.js框架开发用户界面,而服务端则处理后端逻辑。跨域问题是在开发过程中不可避免的,特别是在前端使用Vue3.x框架结合axios库进行开发时。跨域请求是指...

    springboot实现前后端分离项目

    总结起来,本项目展示了如何使用Spring Boot构建后端接口,Vue.js构建前端界面,以及axios处理跨域问题,实现了一个完整的前后端分离的应用。这样的架构模式既保证了后端的稳定性和安全性,又让前端具备了更好的用户...

    前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍.doc

    "前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍" 前台主页搭建: * 在 Vue 项目中创建前台主页,使用 HomeView.vue 作为主页组件 * 引入 Header、Footer、...

    nginx解决跨域问题的实例方法

    跨域问题在现代Web开发中是一个常见的挑战,尤其是在前后端分离的架构中。浏览器的同源策略限制了JavaScript从一个源获取另一个源的数据,而Nginx作为一个强大的反向代理服务器,可以有效地解决这个问题。本篇文章将...

    vue跨域问题解决方案.docx

    Vue-cli 脚手架搭建的项目中,前后端分离导致的跨域问题变得尤其棘手。本文将详细介绍 Vue 跨域问题的解决方案,包括使用 Vue-cli 搭建项目、使用 axios 进行 ajax 请求、使用 proxyTable 代理解决跨域问题,以及...

    解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    在前后端分离的架构中,Vue.js作为前端框架与Spring Boot作为后端服务进行交互时,常常会遇到跨域和Session、Cookie失效的问题。本文将详细介绍如何解决这些问题。 首先,跨域是由于浏览器的安全策略限制,同一源...

    vue+前后端的跨域问题解决b sesson不一样解决.zip

    但实际开发中,由于前后端分离,通常它们会部署在不同的域名或端口下,这就导致了跨域问题的出现。本文将深入探讨如何解决Vue.js与后端服务之间的跨域问题,以及当Session不一致时的处理策略。 首先,了解跨域的...

    vue2 前后端分离项目ajax跨域session问题解决方法

    总结来说,解决Vue2前后端分离项目中的AJAX跨域Session问题,关键在于前端设置axios的`withCredentials`属性,以及后端允许跨域并接受credentials的配置。通过这些设置,前端就能在跨域请求中保持用户登录状态,从而...

    影视评论系统Springboot+Vue(前后端分离)

    2. CORS跨域支持:Springboot设置CORS策略,允许Vue应用从不同源发起请求,解决跨域问题。 3. JWT令牌验证:通过JWT实现前后端的用户认证,前端在每次请求时携带令牌,后端验证其合法性。 四、数据库设计与SQL文件 ...

    [SpringBoot+Ajax]跨域资源共享CORS前后端分离简单演示样例.rar

    总结,这个"SpringBoot+Ajax]跨域资源共享CORS前后端分离简单演示样例"旨在帮助开发者理解并实践CORS在SpringBoot后端和Ajax前端中的应用,解决跨域问题,提升Web应用的开发效率和用户体验。通过学习和运行这个样例...

    ssm+vue前后端分离框架整合实现(附源码)

    在当前互联网行业里,前后端分离的开发模式逐渐成为主流。...通过合理配置接口地址、处理跨域问题,前后端分离项目可以更加高效地进行开发。希望本文对您在整合SSM和Vue.js框架时提供一定的帮助和参考。

    详解springboot和vue前后端分离开发跨域登陆问题

    解决 SpringBoot 和 Vue 前后端分离开发跨域登录问题的关键技术要点 SpringBoot 和 Vue 是目前非常流行的前后端分离开发技术栈,然而在实际开发中,经常会遇到跨域登录问题。如果不进行合理的配置和处理,将会导致...

    前端跨域+后端跨域.zip

    跨域限制了恶意网站读取其他网站的数据,保障了用户信息的安全,但同时也给前后端分离的Web应用带来了挑战。 前端跨域主要涉及Ajax请求。当使用XMLHttpRequest或fetch进行异步请求时,如果请求的目标URL与当前页面...

    SpringBoot+Vue.js实现前后端分离的文件上传功能

    此外,文章提到了跨域问题的解决方法之一是使用@CrossOrigin注解,该注解允许跨域请求,这是前后端分离架构中常见的一个问题。在实际开发中,跨域问题还有其他多种解决方案,例如配置CORS过滤器、使用代理服务器等。...

    基于axios 解决跨域cookie丢失的问题

    它易于使用且功能强大,广泛应用于前后端分离的项目中。在进行跨域请求时,由于浏览器的同源策略,默认情况下,axios发起的GET、POST等请求不会自动携带cookies。因此,当用户登录后,服务器设置的session ID或其他...

    springboot+vue前后端分离脚手架项目.docx

    1. **跨域问题**:在开发阶段,需配置Spring Boot允许跨域请求,或者在前端使用代理解决跨域问题。 2. **状态管理**:对于复杂的状态管理,合理使用Vuex能有效避免状态混乱。 3. **错误处理**:前后端都需要设置合适...

    spingboot+vue前后端分离项目人员管理系统

    2. **跨域问题处理**:由于前后端部署在不同的域名下,会存在跨域问题,需通过CORS策略或者JSONP等方式解决。 3. **数据校验**:前端进行表单验证,提升用户体验,后端同样进行数据校验,确保数据安全。 4. **错误...

    Vue.js 中 axios 跨域访问错误问题及解决方法

    然而,这一策略也限制了前后端分离开发模式下的接口调用,开发者需要采取措施来解决这一问题。 文章中提到的一个典型的错误信息是:"Failed to load *** 'Access-Control-Allow-Origin' header in the response ...

    python+vue3前后端分离项目.zip

    2. **Teleport**:将DOM元素渲染到指定位置,解决了组件嵌套问题和跨域脚本问题。 3. **Suspense**:用于处理异步组件加载,提升用户体验。 4. **Ref和Reactive**:更直观的响应式声明,简化状态管理。 5. **Vue ...

Global site tag (gtag.js) - Google Analytics