在线测试跨域请求

红太狼 2022-11-07 01:44 258阅读 0赞

在Console输入下面的代码：

var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://xxx.com/common/listCity');
    xhr.send(null);
    xhr.onload = function(e) {
        var xhr = e.target;
        console.log(xhr.responseText);
    }

或者

(function loadXMLDoc() {
                    var xmlhttp;
                    xmlhttp = new XMLHttpRequest();
                                xmlhttp.onreadystatecatechange = function() {
                    }
                                xmlhttp.open("GET", "http://ip:8997/api/screenData/machineData", true);
                                xmlhttp.withCredentials = true;
                                xmlhttp.send();
                })()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NjEzMzEx_size_16_color_FFFFFF_t_70]  
回车运行代码  
![在这里插入图片描述][20210310162902593.png]  
java处理跨域

第一种方法： 基于WebMvcConfigurerAdapter配置加入Cors的跨域

import org.springframework.context.annotation.Configuration; 
    import org.springframework.web.servlet.config.annotation.CorsRegistry; 
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; 
    
    
    @Configuration 
    
    public class CorsConfig extends WebMvcConfigurationSupport { 
    
        @Override 
        public void addCorsMappings(CorsRegistry registry) { 
            registry.addMapping("/**"); 
        } 
    }

第二种方法：集成HandlerInterceptorAdapter拦截器 \*

@Component
    public class CorsInterceptor extends HandlerInterceptorAdapter {
    
        private final Logger logger = LoggerFactory.getLogger(CorsInterceptor.class);
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
    //        response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");
            response.setHeader("Access-Control-Max-Age", "86400");
            response.setHeader("Access-Control-Allow-Headers", "*");
            response.setHeader("Access-Control-Allow-Origin",request.getHeader("origin"));
    
            // 如果是OPTIONS则结束请求
            if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
                response.setStatus(HttpStatus.NO_CONTENT.value());
                return false;
            }
    
            return true;
        }
    
    }

第三种： 创建一个filter解决跨域。 \*

@Component
    public class SimpleCORSFilter implements Filter {
    
        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, HEAD");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");
            chain.doFilter(req, res);
        }
    
        public void init(FilterConfig filterConfig) {}
    
        public void destroy() {}
    
    }

springboot

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;
    
    @Configuration
    public class CorsConfig {
        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);
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NjEzMzEx_size_16_color_FFFFFF_t_70]: /images/20221023/2a4b547c523140d3a3b9d2fc0b5fb2be.png
[20210310162902593.png]: /images/20221023/161c15f7fe1e4ea9bece39178e2f1064.png