Spring Boot和Vue跨域请求问题原理解析

2024-07-30 11:28:45

这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

使用Spring Boot + Vue 做前后端分离项目搭建，实现登录时，出现跨域请求

Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Vue中使用的Axios，配置main.js文件

Axios.defaults.baseURL = 'http://localhost:80'
Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
Axios.defaults.withCredentials = true

Spring Boot中重写WebMvcConfigurationSupport的方法addCorsMapping

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport{
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    String[] origins = {"http://localhost:8080"};
    registry.addMapping("/**")
        .allowedOrigins(origins)
        .allowCredentials(true)
        .allowedMethods("*")
        .allowedHeaders("*")
        .maxAge(3600);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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

最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意:"@CrossOrigin"注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型
springboot整合vue项目(小试牛刀)

序本文主要研究一下如何在springboot工程整合vue maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> 新建springboot的web工程,默认会在resources目录下生成static以及templates文件夹 temp
SpringBoot+Vue.js实现前后端分离的文件上传功能

这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l
使用springboot结合vue实现sso单点登录

本文实例为大家分享了springboot vue实现sso单点登录的具体代码,供大家参考,具体内容如下项目结构: 开发工具:idea, maven3 静态文件下载地址 1.pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.or
Springboot项目与vue项目整合打包的实现方式

我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等.因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少.针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器
vue+springboot实现项目的CORS跨域请求

跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解.本文为通过一个小demo对该博客中分析内容的一些验证. 1.springboot+vue项目的构建和启动细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可. 我的d
解决前后端分离 vue+springboot 跨域 session+cookie失效问题

环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了搜索问题,发现跨域,服务器响应的setCookie浏览器无
websocket在springboot+vue中的使用教程

1.websocket在springboot中的一种实现在java后台中,websocket是作为一种服务端配置,其配置如下 @Configuration public class WebSocketConfig { @Bean(name="serverEndpointExporter") public ServerEndpointExporter getServerEndpointExporterBean(){ return new ServerEndpointExporter()
Spring Boot和Vue跨域请求问题原理解析

这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol
Spring Boot设置支持跨域请求过程详解

现代浏览器出于安全的考虑, HTTP 请求时必须遵守同源策略,否则就是跨域的 HTTP 请求,默认情况下是被禁止的,IP(域名)不同.或者端口不同.协议不同(比如 HTTP.HTTPS)都会造成跨域问题. 一般前端的解决方案有: ① 使用 JSONP 来支持跨域的请求,JSONP 实现跨域请求的原理简单的说,就是动态创建<script>标签,然后利用<script>的 SRC 不受同源策略约束来跨域获取数据.缺点是需要后端配合输出特定的返回信息. ② 利用反应代理的机制来解决跨域的
Java Spring boot 2.0 跨域问题的解决

跨域一个资源会发起一个跨域HTTP请求(Cross-site HTTP request), 当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时 . 比如说,域名A(http://domaina.example)的某 Web 应用程序中通过标签引入了域名B(http://domainb.foo)站点的某图片资源(http://domainb.foo/image.jpg),域名A的那 Web 应用就会导致浏览器发起一个跨站 HTTP 请求.在当今的 Web 开发中,使用跨站 HTTP
利用SpringMVC过滤器解决vue跨域请求的问题

之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
使用jquery的jsonp如何发起跨域请求及其原理详解

前言本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将
跨域解决方案Jsonp原理解析

这篇文章主要介绍了跨域解决方案Jsonp原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.什么是Jsonp? Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略. 同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 Ja
Spring Boot(五)之跨域、自定义查询及分页

跨域前面我们初步做出了一个可以实现受保护的 REST API,但是我们没有涉及一个前端领域很重要的问题,那就是跨域请求( cross-origin HTTP request ).先来回顾一些背景知识: 跨域请求定义:当我们从本身站点请求不同域名或端口的服务所提供的资源时,就会发起跨域请求. 例如最常见的我们很多的 css 样式文件是会链接到某个公共 CDN 服务器上,而不是在本身的服务器上,这其实就是典型的一个跨域请求.但浏览器由于安全原因限制了在脚本( script )中发起的跨域 HTT
Ajax如何进行跨域请求?Ajax跨域请求的原理

本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容如下下面我们在本地建两个站点演示一下第一步首先我们在本地搭建好一个Apache服务器:下载地址: 第二步服务器配置好以后,在本地配置好两个虚拟的域名: 第三步我们在C盘建一个文件夹命名为"HTML5": 第四步找到Apache虚拟主机的配置文件,然后打开配置文件第五步在第三步建的HTML5文件夹下分别建一个文件夹a和文件夹b; 第六步修改Apache虚拟主机的配置文件,如图第七步修改一下host文件,添加a
JS跨域请求的问题解析

同源策略在运行中我们有时会出错是因为我们违反了同源策略,这是一种浏览器所实施的安全措施,用于限制具有不同来源的文档之间的交互.页面的来源由其协议,主机和端口号定义.具有相同来源的资源可以相互完全访问.但是如果具有不相同的源将会拒绝访问. http://www.a.com/a.js http://www.b.com/a.js 这两个之间就不可以互相访问,因为域名的不相同域名组成如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源写入,而不允许跨源读取这意味着同源政策
Spring boot 总结之跨域处理cors的方法

背景现在做的很多项目都是前后端分离的,这就引出一个很常见的问题,我们的页面和接口是在不同域名下的,当我们通过ajax访问后端接口的时候就会出现跨域问题,这种问题我们怎么解决呢?一般来说就是cors和jsonp这两种方案.Spring简化了cors的配置,接下来我们来看一下它提供的cors. 跨域问题描述 Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等. CORS 与 JSONP 相比: 1. JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 H

Spring Boot和Vue跨域请求问题原理解析

相关推荐

随机推荐