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

跨域资源共享CORS（Cross-origin Resource Sharing），是W3C的一个标准，允许浏览器向跨源的服务器发起XMLHttpRequest请求，克服ajax请求只能同源使用的限制。关于CORS的详细解读，可参考阮一峰大神的博客：跨域资源共享CORS详解。

1. 遇到的问题：

我用spring-boot 做Rest服务，Vue做前端框架，用了element-admin-ui这个框架做后台管理。在调试的过程中遇到了如下错误:

Preflight response is not successful

2. 分析问题

这个问题是典型的CORS跨域问题。

所谓跨域：

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

3. 解决方法

在项目中添加类CustomCORSConfiguration 代码如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @author spartajet
 * @description
 * @create 2018-05-15 下午5:00
 * @email spartajet.guo@gmail.com
 */
@Configuration
public class CustomCORSConfiguration {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    corsConfiguration.setAllowCredentials(true);
    return corsConfiguration;
  }

  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

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

赞 (0)

相关推荐

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

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • springboot vue 跨域问题的解决

    1.Spring Boot跨域配置有两种方法 在后端使用Spring Boot.Spring Boot跨域非常简单,只需书写以下代码即可. @Configuration public class CustomCORSConfiguration { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.add

  • vue+springboot实现项目的CORS跨域请求

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

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

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解. 1. 遇到的问题: 我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理.在调试的过程中遇到了如下错误: Preflight response is not

  • Spring Boot详解五种实现跨域的方式

    Spring Boot详解五种实现跨域的方式

    目录 一.为什么会出现跨域问题 二.什么是跨域 三.非同源限制 四.java后端实现CORS跨域请求的方式 1. 返回新的CorsFilter(全局跨域) 2. 重写WebMvcConfigurer(全局跨域) 3. 使用注解 (局部跨域) 4. 手动设置响应头(局部跨域) 5. 使用自定义filter实现跨域 一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能

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

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • vue项目中jsonp跨域获取qq音乐首页推荐问题

    自己利用业余时间,为了更加数据vue和es6的特性,自学着和做了vue的移动端webapp项目.在项目中也是遇到了很多的问题. 接下来,先说一下怎么实现这个需求,然后再说我遇到的问题,以用来纠错. 第一步,再vue项目中引入 jsonp ,并进行 jsonp 的封装. 使用 npm 引入,输入: npm install jsonp --save 安装好之后可以在自己的 package.json 文件中查看是否有此依赖.如下图所示: 如果有红框中显示的内容,说明安装成功,进入下一步封装: impo

  • 关于vue 项目中浏览器跨域的配置问题

    1.什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域. 2.同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 3.在项目中配置 打开项目找到config文件下的index.js,在js proxyTable中配置跨域,代码如下 proxyTable: { '/api':

  • 详解Spring Boot 2.0.2+Ajax解决跨域请求的问题

    问题描述 后端域名为A.abc.com,前端域名为B.abc.com.浏览器在访问时,会出现跨域访问.浏览器对于javascript的同源策略的限制. HTTP请求时,请求本身会返回200,但是返回结果不会走success,并且会在浏览器console中提示: 已拦截跨源请求:同源策略禁止读取位于 https://www.baidu.com/ 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决方案 1.jsonp 2.引用A站的js 3.N

  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题.本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫:那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!! 这里就说ch

  • vue开发环境配置跨域的方法步骤

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域使用工具: vue-cli自带的配置配置 目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //是否跨域 // s

  • Spring Boot 2.X优雅的解决跨域问题

    Spring Boot 2.X优雅的解决跨域问题

    一.什么是源和跨域 源(origin)就是协议.域名和端口号. URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口全部相同,则表示他们同源.否则,只要协议.域名.端口有任何一个不同,就是跨域. 对https://www.baidu.com/index.html进行跨域比较: URL 是否跨域 原因 https://www.baidu.com/more/index.html 不跨域 三要素相同 https://map.baidu.com/ 跨域 域名不同 http://www.b

  • Spring Security拦截器引起Java CORS跨域失败的问题及解决

    在已设置CORS的项目中加入Spring Security,导致跨域访问失败,一开始以为是设置错CORS的问题,后来才发现是因为Spring Security的拦截冲突引起的. (一) CORS介绍 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. response响应头 响应头字段名称 作用 Access-Contro

随机推荐