`
ninghq
  • 浏览: 12324 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

前后端分离,spring boot跨域问题

阅读更多
跨域:浏览器同源策略
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"
协议相同/域名相同/端口相同
一句话:浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
浏览器控制台跨域提示:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
解决方法
1)JSONP
2)Http响应头配置允许跨域(通过cors协议解决跨域问题)
 
Cors协议:H5中的新特性:Cross-Origin Resource Sharing(跨域资源共享)。通过它,我们的开发者(主要指后端开发者)可以决定资源是否能被跨域访问。
cors是一个w3c标准,它允许浏览器(目前ie8以下还不能被支持)像我们不同源的服务器发出xmlHttpRequest请求,我们可以继续使用ajax进行请求访问。
具体关于cors协议的文章 ,可以参考http://www.ruanyifeng.com/blog/2016/04/cors.html 这篇文章
第一步:nginx层配置(可以参考https://www.cnblogs.com/hawk-whu/p/6725699.html)
server{
listen 8099;
server_name wdm.test.cn;
location / {
  // 没有配置OPTIONS的话,浏览器如果是自动识别协议(http or https),那么浏览器的自动OPTIONS请求会返回不能跨域
  if ($request_method = OPTIONS ) {
    add_header Access-Control-Allow-Origin "$http_origin";
    add_header Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, DELETE";
    add_header Access-Control-Max-Age "3600";
    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization";
    add_header Access-Control-Allow-Credentials "true";
    add_header Content-Length 0;
    add_header Content-Type text/plain;
    return 200;
  }
  add_header 'Access-Control-Allow-Origin' '$http_origin';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
  proxy_pass http://127.0.0.1:8080;
  }
}
  第二步:程序代码中处理
SpringBoot自带配置
@Configuration
public class Cors extends WebMvcConfigurerAdapter {
@Override
 public void addCorsMappings(CorsRegistry registry) {
	 registry.addMapping("/**")
		 .allowedOrigins("*")
		 .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
		 .allowCredentials(true).maxAge(3600);
	}

}
 如果想做到更细致也可以使用@CrossOrigin这个注解在controller类中使用。
@CrossOrigin(origins = "http://192.168.1.97:8080", maxAge = 3600)
@RequestMapping("rest_index")
@RestController
public class IndexController{}
 (注意点:假如接口报错,则跨域配置不生效)
分享到:
评论

相关推荐

    vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot...我面临的第一个问题是跨域,浏览器控制台直接报CORS,以我多年开发经验,我果断在后台配置了跨域配置,代码如下: @Configuration publi

    12 spring boot Security Jwt 前后端分离跨域登录

    标题 "12 spring boot Security Jwt 前后端分离跨域登录" 提示我们这个项目是关于使用Spring Boot Security和JWT(JSON Web Tokens)技术来实现一个前后端分离的跨域登录系统。在这个系统中,Spring Boot作为后端...

    springboot实现前后端分离项目

    本项目基于Spring Boot实现了后端接口,并结合Vue.js进行前端展示,同时利用axios处理跨域问题,提供了一个完整的前后端分离实践示例。 1. **Spring Boot**: Spring Boot是Spring框架的一个简化版,它简化了...

    Spring Boot技术栈博客企业前后端2018

    根据给定的文件标题“Spring Boot技术栈博客企业前后端2018”以及描述“Spring Boot技术栈博客企业前后端2018”,我们可以推断出这份资料主要围绕Spring Boot框架及其在企业级应用中的前后端开发进行讲解。...

    spring boot 与 iview 前后端分离架构.zip

    - 跨域配置:由于前后端分离,可能出现跨域问题,需要在Spring Boot中配置CORS策略,允许前端访问后端API。 - JWT安全认证:为了保护API,可以采用JWT(JSON Web Tokens)进行用户认证,Spring Security可以帮助...

    Spring boot 和Vue开发中CORS跨域问题解决

    解决Spring Boot和Vue.js开发中的CORS跨域问题是一个重要的步骤,它保证了前后端分离的应用能够正常地进行数据交互。通过在Spring Boot后端进行合理的CORS配置,以及在Vue.js前端正确设置代理,可以有效解决这一问题...

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

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

    Vue+Spring Boot前后端分离开发实战源码和ppt.zip

    在"Vue+Spring Boot前后端分离开发实战源码和ppt.zip"这个压缩包中,包含了关于这两个技术结合使用的实战项目源码和相关教程。通过学习这个资源,你可以深入理解如何在实际项目中实现前后端分离的开发模式。 1. **...

    基于Spring Boot和Vue2开发的前后端分离的后台管理系统.zip

    【标题】: "基于Spring Boot和Vue2开发的前后端分离的后台管理系统" 这个项目是利用Spring Boot和Vue2这两个主流技术栈构建的现代Web应用。Spring Boot是Java领域的一个热门框架,它简化了Spring应用的初始搭建以及...

    Spring Boot+Vue前后端分离项目练习02之网盘项目利用token进行登陆验证

    在本项目"Spring Boot+Vue前后端分离项目练习02之网盘项目...通过这个项目,开发者不仅可以掌握Spring Boot和Vue.js的结合使用,还能深入理解前后端分离模式下的用户认证流程,这将对实际工作中的Web应用开发大有裨益。

    解决Vue调用springboot接口403跨域问题

    在当前的Web开发中,前后端分离架构变得越来越流行。这种架构意味着前端使用一种技术栈(如...通过这些配置,可以有效解决前端Vue.js应用在访问后端资源时遇到的跨域问题,从而使得前后端分离的开发模式得以顺利进行。

    SpringBoot+Mybatis在线问卷系统.zip

    这是个前后端分离的、支持跨域访问的REST风格的Vue.js+Spring Boot项目,开发工具为IDEA,数据库为MySQL。 这是个前后端分离的、支持跨域访问的REST风格的Vue.js+Spring Boot项目,开发工具为IDEA,数据库为MySQL。...

    Spring boot+vue3+element plus实现后台管理系统

    前后端分离项目,Spring boot作为后端,vue框架实现前端,后端整合swagger3测试工具,jwt实现验证码生成,awt生成图形验证码,整合邮箱验证,使用mybatis-generator自动生成实体类以及mapper,设置有拦截器验证登录...

    解决springboot实现跨域session共享问题

    在开发过程中,这可能会导致前后端分离的架构中数据交互的困扰。Spring Boot提供了CORS(Cross-Origin Resource Sharing)配置,允许我们定义哪些域可以访问我们的API。 要启用CORS支持,我们需要在Spring Boot的...

    前后端分离项目+springboot+vue+图书管理系统

    在这篇文章中,我们将讨论如何使用 Spring Boot 和 Vue.js 构建一个前后端分离的图书管理系统。该项目中,我们将遇到一些常见的错误和问题,并记录下解决方法。 项目搭建 在开始构建项目之前,我们需要安装相应的...

    基于js+springboot+mybatis+mysql的在线问卷系统,采用前后端分离技术,支持跨域访问

    这是个前后端分离的、支持跨域访问的REST风格的Vue.js+Spring Boot项目,开发工具为IDEA,数据库为MySQL。 API 编码方式均为UTF-8 1.管理员相关 1.1 注册 接口地址 domain/api/v1/register 请求方式 HTTP POST ...

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

    在前后端分离的项目中,Vue2经常遇到的一个挑战是处理AJAX跨域请求时的Session问题。在本文中,我们将深入探讨这个问题,并提供一种解决方案。 首先,让我们理解跨域和Session的基本概念。跨域是由于浏览器的同源...

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

    本文将深入探讨如何使用Springboot和Vue.js技术栈构建一个完整的前后端分离的影视评论系统。 一、Springboot框架的应用 Springboot是Java领域的一款轻量级框架,它简化了Spring应用程序的开发过程,通过自动配置、...

    JAVA著名免费框架若依前后端分离项目详细部署文档

    综上,部署若依框架的前后端分离项目需要对Linux、Nginx、Tomcat、Redis、Vue.js和Spring Boot有一定的了解,同时还需要掌握跨域问题的解决方案。遵循上述步骤,开发者能够成功部署并运行若依项目,实现高效、稳定的...

Global site tag (gtag.js) - Google Analytics