SpringBoot解决ajax跨域问题的方法

2019-11-26 10:12:41

字体：大中小

来源：转载

供稿：网友

SpringBoot解决ajax跨域，供大家参考，具体内容如下

一、第一种方式

1、编写一个支持跨域请求的 Configuration

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 */@Configurationpublic 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请求接口

@RestControllerpublic class HelloController {  @Autowired  HelloService helloService;  @GetMapping(value = "/test", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)  public String query() {    return "hello";  }}

二、第二种方式（推荐）

PS：第一种存在一个问题，当服务器抛出 500 的时候依旧存在跨域问题

@SpringBootApplication@ComponentScan@EnableDiscoveryClientpublic 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

<!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过滤器

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 * */@Componentpublic 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跨域也比较简单，只需添加以下配置即可。

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”，其实是前端传给后端过来的。如果记不得也没有关系，浏览器的调试器会有详细说明。

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

上一篇：史上最难的一道Java面试题

下一篇：Spring Security 构建rest服务实现rememberme 记住我功能