`
ninghq
  • 浏览: 11888 次
  • 性别: 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作为后端...

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

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

    springboot实现前后端分离项目

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

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

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

    若依前后端分离项目部署文档(完整版)

    第一部分:部署linux + nginx 第二部分:部署Windows+tomcat 第三部分:调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。...高效率开发,使用代码生成器可以一键生成前后端代码。)

    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应用开发大有裨益。

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

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

    SpringBoot+Mybatis在线问卷系统.zip

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

    前后端分离项目+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 ...

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

    第一部分:部署linux + nginx 第二部分:部署Windows+tomcat 第三部分:调用第三方api的跨域问题处理。 以及常见的部署后页面显示404 的问题处理。...高效率开发,使用代码生成器可以一键生成前后端代码。)

    vue+springboot前后端分离实现单点登录跨域问题处理.doc

    在近期的一次项目开发中,我们遇到了一个棘手的问题,那就是如何在 Vue 和 Spring Boot 的前后端分离架构中实现单点登录(SSO)。单点登录是指用户只需要登录一次,就可以访问到不同的应用系统,而不需要在每个系统...

    springboot vue前后端分离.docx

    在实现 Spring Boot 后端和 Vue.js 前端的分离开发时,通常会采用前后端分离的架构来提高开发效率和灵活性。以下是一般步骤和关键点: 后端(Spring Boot)开发步骤: 创建 Spring Boot 项目: 使用 Spring ...

    spring boot整合vue

    这种整合可以实现前后端分离的开发模式,提高开发效率。 **Spring Boot 知识点:** 1. **起步依赖(Starters)**:Spring Boot通过一系列预配置的起步依赖库,使得添加新功能变得简单,例如`spring-boot-starter-...

Global site tag (gtag.js) - Google Analytics