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

栏目: Java · 发布时间: 5年前

内容简介:后端域名为A.abc.com,前端域名为B.abc.com。浏览器在访问时,会出现跨域访问。浏览器对于javascript的同源策略的限制。HTTP请求时,请求本身会返回200,但是返回结果不会走success,并且会在浏览器console中提示:已拦截跨源请求:同源策略禁止读取位于 https://www.baidu.com/ 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’)。

问题描述

后端域名为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('服务器发生错误!');
    }
});

此时,当前端向后端服务做跨域请求时,就会带上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生效。


以上所述就是小编给大家介绍的《Spring Boot 2.0.2+Ajax解决跨域请求的问题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R for Data Science

R for Data Science

Hadley Wickham、Garrett Grolemund / O'Reilly Media / 2016-12-25 / USD 39.99

http://r4ds.had.co.nz/一起来看看 《R for Data Science》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器