脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Spring Boot Ajax 跨域请求

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

 更新时间：2019年03月05日 16:23:16   作者：wencst  
这篇文章主要介绍了详解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.Nginx做A站的反向代理

4.后端服务放开跨域请求

其中，以最后两种见常。

详细方案

本文主要描述第四种解决方案：后端服务放开跨域请求。

spring boot中放开跨域请求很简单。

1.增加一个configuration类

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 wencst
 * @creation 2017年8月18日
 */
@Configuration
public class CustomCORSConfiguration {
 private CorsConfiguration buildConfig() {
 CorsConfiguration corsConfiguration = new CorsConfiguration();
 corsConfiguration.addAllowedOrigin("*");
 corsConfiguration.addAllowedHeader("*");
 corsConfiguration.addAllowedMethod("*");
 return corsConfiguration;
 }
 @Bean
 public CorsFilter corsFilter() {
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 source.registerCorsConfiguration("/**", buildConfig());
 return new CorsFilter(source);
 }
}

增加此类以后，非同源http访问可以正常进行了，但是会不会有什么问题呢？

对于大部分网站依然需要使用cookie作为前后端传输数据的媒介，然而默认非同源请求是不携带cookie信息的。

2.服务端允许跨域携带cookie信息

在spring boot2.0.2中，允许跨域设置比较简单，只需增加一个configuration类即可。

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 wencst
 * @creation 2017年8月18日
 */
@Configuration
public class CustomCORSConfiguration {
 private CorsConfiguration buildConfig() {
 CorsConfiguration corsConfiguration = new CorsConfiguration();
 corsConfiguration.addAllowedOrigin("*");
 corsConfiguration.addAllowedHeader("*");
 corsConfiguration.addAllowedMethod("*");
 corsConfiguration.addExposedHeader("Content-Type");
 corsConfiguration.addExposedHeader( "X-Requested-With");
 corsConfiguration.addExposedHeader("accept");
 corsConfiguration.addExposedHeader("Origin");
 corsConfiguration.addExposedHeader( "Access-Control-Request-Method");
 corsConfiguration.addExposedHeader("Access-Control-Request-Headers");
 corsConfiguration.setAllowCredentials(true);
 return corsConfiguration;
 }
 @Bean
 public CorsFilter corsFilter() {
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 source.registerCorsConfiguration("/**", buildConfig());
 return new CorsFilter(source);
 }
}

增加信息后，在前端依然需要调整AJAX请求，才能在非同源请求中携带cookie信息。

3.前端调整

$.ajax({
 url: 'http://beta.roboming.com/api.php?s=/Public/AdminLogin.html',
 type: 'POST',
 async:true,
 xhrFields:{
  withCredentials:true
 },
 data: {
  username:userName,
  password:pwd
 },
 success: function(respon){
  console.log(respon);
  var res=eval(respon);
 },
 error: function(){
  alert('服务器发生错误！');
 }
});

此时，当前端向后端服务做跨域请求时，增加

xhrFields:{
  withCredentials:true
},

就会带上cookie信息了，同理会带上token/sessionID等等内容。

测试方法

spring boot中增加一个controller

@Controller
public class LoginController {
 @RequestMapping(value = "setString")
 @ResponseBody
 public String setString(HttpServletRequest request, HttpServletResponse response，@RequestParam String value) {
 request.getSession().setAttribute("username", value);
 return "OK";
 }
 @RequestMapping(value = "getString")
 @ResponseBody
 public String getString(HttpServletRequest request, HttpServletResponse response) {
 String username = (String)request.getSession().getAttribute("username");
 return username;
 }
}

增加一个index.html，来访问跨域访问。

<html>
<head>
<meta charset="utf-8">
<title>跨域请求</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button onclick="set()">set</button>
<br><br>
<button onclick="get()">get</button>
<script>
function set(){
 $.ajax({
 url:'http://wencst.vicp.net/setString?value=10',
 xhrFields:{
  withCredentials:true
 },
 success:function(result){
 alert(result);
 }
 });
}
function get(){
 $.ajax({
 url:'http://wencst.vicp.net/getString',
 xhrFields:{
  withCredentials:true
 },
 success:function(result){
 alert(result);
 }
 });
}
</script>
</body>
</html>

html文件可以单独本地访问即可出现效果，并不一定要形成服务访问。

当服务端不允许跨域访问时，html文件访问均报错，并调用失败。

当服务端允许跨域访问时，html请求访问成功。

当服务端开启cookie传递，并在html文件中增加 xhrFields参数时，session生效。

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

您可能感兴趣的文章:

相关文章

  • 解决RedisTemplate存储至缓存数据出现乱码的情况

    解决RedisTemplate存储至缓存数据出现乱码的情况

    这篇文章主要介绍了解决RedisTemplate存储至缓存数据出现乱码的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2021-03-03
  • Java+MySQL实现图书管理系统(完整代码)

    Java+MySQL实现图书管理系统(完整代码)

    这篇文章主要介绍了Java+MySQL实现图书管理系统(完整代码),本文给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • 基于Java实现一个自己的HTTP浏览器

    基于Java实现一个自己的HTTP浏览器

    这篇文章主要为大家详细介绍了如何基于Java实现一个自己的HTTP浏览器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • java面向对象设计原则之迪米特法则分析详解

    java面向对象设计原则之迪米特法则分析详解

    这篇文章主要为大家介绍了java面向对象设计原则之迪米特法则的示例分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，学有所得
    2021-10-10
  • Java Web开发入门书籍实例解析(总结一)

    Java Web开发入门书籍实例解析(总结一)

    从事Java Web开发这一段时间来，对Java 面向对象的思想和MVC开发模式可以说已经熟悉了。我当前参与的项目使用的框架是Spring、SpringMVC、Hibernate。下面脚本之家小编给大家整理一篇教程帮助大家学习javaweb相关知识，感兴趣的朋友可以参考下
    2016-03-03
  • 怎样提高mybatis-plus中saveBatch方法的效率

    怎样提高mybatis-plus中saveBatch方法的效率

    这篇文章主要介绍了怎样提高mybatis-plus中saveBatch方法的效率问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • java Long类型转为String类型的两种方式及区别说明

    java Long类型转为String类型的两种方式及区别说明

    这篇文章主要介绍了java Long类型转为String类型的两种方式及区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-09-09
  • 详解Java如何有效避免空指针

    详解Java如何有效避免空指针

    空指针,也就是NullPointerException 简称NPE的,怕一下子写出NPE,部分的伙伴看不懂,索性就改成了空指针,在实际的开发中,我们最讨厌的就是遇到空指针了,业务跑着跑着发现了空指针,所以本文详细介绍了Java如何有效的避免空指针,需要的朋友可以参考下
    2023-12-12
  • JavaWeb响应下载功能实例代码（包含工具类）

    JavaWeb响应下载功能实例代码（包含工具类）

    今天通过本文给大家分享的是关于javaweb的响应（response）下载功能，需要的朋友参考下吧
    2017-07-07
  • SpringBoot之瘦身部署的详细步骤

    SpringBoot之瘦身部署的详细步骤

    本篇文章主要介绍了SpringBoot之瘦身部署的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论