SpringBoot解决ajax跨域,供大家参考,具体内容如下
一、第一种方式
1、编写一个支持跨域请求的 Configuration
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* 处理AJAX请求跨域的问题
* @author Levin
* @time 2017-07-13
*/
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
static final String ORIGINS[] = new String[] { "GET" , "POST" , "PUT" , "DELETE" };
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping( "/**" ).allowedOrigins( "*" ).allowCredentials( true ).allowedMethods(ORIGINS)
.maxAge( 3600 );
}
}
|
2、HTTP请求接口
1
2
3
4
5
6
7
8
9
10
11
12
|
@RestController
public class HelloController {
@Autowired
HelloService helloService;
@GetMapping (value = "/test" , produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public String query() {
return "hello" ;
}
}
|
二、 第二种方式(推荐)
PS:第一种存在一个问题,当服务器抛出 500 的时候依旧存在跨域问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
@SpringBootApplication
@ComponentScan
@EnableDiscoveryClient
public class ManagementApplication {
public static void main(String[] args) {
SpringApplication.run(ManagementApplication. class , args);
}
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin( "*" );
corsConfiguration.addAllowedHeader( "*" );
corsConfiguration.addAllowedMethod( "*" );
corsConfiguration.addExposedHeader(HttpHeaderConStant.X_TOTAL_COUNT);
return corsConfiguration;
}
/**
* 跨域过滤器
*
* @return
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration( "/**" , buildConfig()); // 4
return new CorsFilter(source);
}
}
|
2、index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >跨域请求</ title >
< script src = "https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" >
</ script >
< script >
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"http://localhost:8080/test",success:function(result){
$("#p1").html(result);
}});
});
});
</ script >
</ head >
< body >
< p width = "500px" height = "100px" id = "p1" ></ p >
< button >获取其他内容</ button >
</ body >
</ html >
|
三、第三种方式,编写Filter过滤器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
package com.cci.market.common.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;
/**
* 处理跨域问题
* @author MR.ZHENG
* @date 2016/08/08
*
*/
@Component
public class OriginFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader( "Access-Control-Allow-Origin" , "*" );
response.setHeader( "Access-Control-Allow-Methods" , "POST, GET, OPTIONS, DELETE,PUT" );
response.setHeader( "Access-Control-Max-Age" , "3600" );
response.setHeader( "Access-Control-Allow-Headers" , "x-requested-with" );
chain.doFilter(req, res);
}
@Override
public void destroy() {
// TODO Auto-generated method stub
}
}
|
四、Nginx跨域配置
Nginx跨域也比较简单,只需添加以下配置即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
location / {
proxy_pass http: //localhost:8080;
if ($request_method = 'OPTIONS' ) {
add_header 'Access-Control-Allow-Origin' '*' ;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' ;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token' ;
add_header 'Access-Control-Max-Age' 1728000 ;
add_header 'Content-Type' 'text/plain; charset=utf-8' ;
add_header 'Content-Length' 0 ;
return 204 ;
}
if ($request_method = 'POST' ) {
add_header 'Access-Control-Allow-Origin' '*' ;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' ;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token' ;
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token' ;
}
if ($request_method = 'GET' ) {
add_header 'Access-Control-Allow-Origin' '*' ;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' ;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token' ;
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token' ;
}
}
|
其中:add_header 'Access-Control-Expose-Headers' 务必加上你请求时所带的header。例如本例中的“Token”,其实是前端传给后端过来的。如果记不得也没有关系,浏览器的调试器会有详细说明。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://www.cnblogs.com/smiler/p/8509062.html