您的位置 首页 java

还不知道如何解决“跨域问题”?来看看我是怎么理解的

1.什么时候会产生跨域问题?

看一下我们的url组成:

协议://域名:端口号 ?参数主要 四者组成

其中 协议的切换,域名的切换,端口号的切换都会造成跨域问题类似如下:

解决方案

前端解决方案

  1. 使用JSONP方式实现跨域调用;
  2. 使用 NodeJS 服务器做为服务代理,前端发起请求到NodeJS服务器, NodeJS服务器代理转发请求到后端服务器;

后端解决方案

  • nginx反向代理解决跨域
  • 服务端设置Response Header(响应头部)的Access-Control-Allow-Origin
  • 在需要跨域访问的类和方法中设置允许跨域访问(如Spring中使用@CrossOrigin注解);
  • 继承使用Spring Web的Cors filter (适用于Spring MVC、Spring Boot)
  • 实现WebMvcConfigurer接口(适用于Spring Boot)

具体方式

一、使用Filter方式进行设置

使用Filter过滤器来过滤服务请求,向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。

 @WebFilterpublic class CorsFilter implements Filter {
@ 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", "*" );
          response.setHeader( "Access-Control-Max-Age", "3600" );
          response.setHeader( "Access-Control-Allow-Headers", "*" );
        response.setHeader( "Access-Control-Allow-Credentials", "true" );
        chain.doFilter( req, res );

    }
}  

二、继承 HandlerInterceptorAdapter

 @ Component public class CrossInterceptor extends HandlerInterceptorAdapter {
@Override public boolean preHandle( HttpServletRequest request, HttpServletResponse response, Object handler )
    throws Exception{
response.setHeader( "Access-Control-Allow-Origin", "*" );
        response.setHeader( "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" );
        response.setHeader( "Access-Control-Max-Age", "3600" );
        response.setHeader( "Access-Control-Allow-Headers", "*" );
        response.setHeader( "Access-Control-Allow-Credentials", "true" );
        return(true);
    }
}  

三、实现 WebMvcConfigurer

 @Configuration@SuppressWarnings( "SpringJavaAutowiredFieldsWarningInspection" ) 
public class AppConfig implements WebMvcConfigurer { 
@Override public void addCorsMappings( CorsRegistry registry ){
registry.addMapping( "/**" )
/* 拦截所有的请求
                .allowedOrigins("#34;)
// 可跨域的域名,可以为 *
                .allowCredentials(true)
                .allowedMethods("*")   
// 允许跨域的方法,可以单独配置
                .allowedHeaders("*");  
// 允许跨域的请求头,可以单独配置
    }
} 
*/  

四、使用Nginx配置

 location / { 
   add_header Access - Control - Allow - Origin *;
   add_header Access - Control - Allow - Headers X - Requested - With;
   add_header Access - Control - Allow - Methods GET, POST, PUT, DELETE, OPTIONS;
    if ( $request_method = 'OPTIONS' )
{
return(204);
    }
}  

五、使用 @CrossOrgin 注解

1.注意:“@CrossOrigin“注解要求jdk1.8以上版本

如果只是想部分接口跨域,且不想使用配置来管理的话,可以使用这种方式

Controller 使用

 @CrossOrigin@RestController@RequestMapping("/user")
public class UserController { }  

在具体接口上使用

 @RestController@RequestMapping( "/user" ) 
public class UserController {
 @CrossOrigin
 @GetMapping( "/{id}" )
 public User getUserInfo(
   @PathVariable Long id ){
}
}  

Spring Cloud Gateway 跨域配置

 spring: 
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/**]':
            # 允许跨域的源(网站域名/ip),设置*为全部
            # 允许跨域请求里的head字段,设置*为全部
            # 允许跨域的method, 默认为GET和OPTIONS,设置*为全部
            allow-credentials: true
            allowed-origins:
              - "#34;
              - "#34;
            allowed-headers: "*"
            allowed-methods:
              - OPTIONS
              - GET
              - POST
              - DELETE
              - PUT
              - PATCH
            max-age: 3600  

注意: 通过gateway 转发的其他项目,不要进行配置跨域配置

有时即使配置了也不会起作用,这时你可以根据浏览器控制的错误输出来查看问题,如果提示是 response 中 header 出现了重复的 Access-Control-* 请求头,可以进行如下操作

 import java.util.ArrayList;
import org.springframework.cloud.gateway.filter.GatewayFilterChain;
import org.springframework.cloud.gateway.filter.GlobalFilter;
import org.springframework.cloud.gateway.filter.NettyWriteResponseFilter;
import org.springframework.core.Ordered;
import org.springframework.http.HttpHeaders;
import org.springframework.stereotype.Component;
import org.springframework.web.server.ServerWeb exchange ;
import reactor.core.publisher.Mono;
 
@Component("corsResponseHeaderFilter")
public class CorsResponseHeaderFilter implements GlobalFilter, Ordered {
 
  @Override
  public int getOrder() {
    // 指定此过滤器位于NettyWriteResponseFilter之后
    // 即待处理完响应体后接着处理响应头
    return NettyWriteResponseFilter.WRITE_RESPONSE_FILTER_ORDER + 1;
  }
 
  @Override
  public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
    return chain.filter(exchange).then(Mono.defer(() -> {
      exchange.getResponse().getHeaders().entrySet().stream()
          .filter(kv -> (kv.getValue() != null && kv.getValue().size() > 1))
          .filter(kv -> (
              kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN)
                  || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS)
                  || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS)
                  || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS)
                  || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_MAX_AGE)))
          .forEach(kv -> {
            kv.setValue(new ArrayList<String>() {{
              add(kv.getValue().get(0));
            }});
          });
      return chain.filter(exchange);
    }));
  }
}
   

多点点推荐、转发、分享吧好哥哥们!

文章来源:智云一二三科技

文章标题:还不知道如何解决“跨域问题”?来看看我是怎么理解的

文章地址:https://www.zhihuclub.com/181842.shtml

关于作者: 智云科技

热门文章

评论已关闭

8条评论

  1. Guaif FEN esin Pseudoephedrine Meagan lives in Colorado with her husband and three children

  2. Using this reporter mouse, we demonstrated that CXCR5 T cells including Tfh cells could be tracked from the effector phase to the memory phase

  3. Although BCR Abl is not involved in tissue fibrosis pathogenesis, Bosutinib also inhibits the profibrotic c Abl tyrosine kinase 73

  4. In order to evaluate the effectiveness of low subcutaneous rIL 2 doses in a chemoimmuno hormonotherapeutic combination, 36 metastatic melanoma patients were treated with CDDP, rIL 2, alpha IFN and tamoxifen TAM

  5. Further, the metabolites formed by CYPs can be conjugated by UGT, SULT and GST Echocardiography is a specific and relatively sensitive tool in cats for diagnosis of heartworm disease, and is essential in cats that have lower airway disease

网站地图