跨域问题后端解决方案

测试方法

自定义页面进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域测试：jquery请求url测试跨域情况</title>
</head>
<body>
<div>
    输入测试URL:
    <input type="text" id="inputUrl" style="width:500px;" value="http://localhost:8080/code">
    <button onclick="sendUrl()">发送</button>
</div><br/>
输出结果：<br/>
<div id="outputResponse" style="width: 500px;height: 500px">
</div>
<script>
    var s = "http://***/SuperMap/Data-jia3/tileset.json";
    var ss = "http://****/SuperMap/Tile/World/Image/tms.xml";
    function dealSuccessResponse(response){
        console.log("result",response);
        var outputDoc = document.getElementById("outputResponse");

        outputDoc.innerHTML = JSON.parse(response);// JSON.stringify(response);
    }


    function sendUrl() {
        //发送消息
        // var url = mapXmlUrl;
        var url = document.getElementById("inputUrl").value;
        // var xmlSerializer = new XMLSerializer();
        // var str = xmlSerializer.serializeToString(featureRequest);
        var requestOpt = {
            type:'POST',
            contentType:'text/xml',
            data:"",
            success: function (req) {
                // 执行回调函数
                if (dealSuccessResponse){
                    dealSuccessResponse(req);
                }
            },
            timeout :10
        };

        this.sendRequest(url,requestOpt);

    }

    function sendRequest(url, opt) {
        //方法：fetch : https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
        fetch(url,{
            method : opt.type,
            body: opt.data
        }).then(function (respone) {
            if (respone.ok){
                return respone;
            }
            throw new Error('Network respone was not ok.');
        }).then(function (respone) {
            if (opt.success){
                opt.success(respone);
            }
        })
    }
</script>
</body>
</html>

浏览器控制台输出

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8080/code");
xhr.send(null);
xhr.onload = function(e) {
 var xhr = e.target;
 console.log(xhr.responseText);
}

解决方法

网关跨域

经过网关的请求配置gateway的yml

spring:
  cloud:
    gateway:
      globalcors: # 全局的跨域处理
        add-to-simple-url-handler-mapping: true # 因为ajax发起者会通过options请求来向服务器询问是否允许跨域，所以需要设置为true来解决options请求被拦截问题
        corsConfigurations:
          '[/**]':
            allowedOrigins: "*" # 允许哪些网站的跨域请求 
            allowedMethods: "*" # 允许的跨域ajax的请求方式
            allowedHeaders: "*" # 允许在请求中携带的头信息
            allowCredentials: true # 是否允许携带cookie
            maxAge: 360000 # 这次跨域检测的有效期，即一定时间内就不需要重复询问是否允许跨域了，直接请求即可。

未经过网关的请求

webflux方式（例如验证码过滤器），需要增加配置文件

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.web.cors.reactive.CorsUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
import reactor.core.publisher.Mono;

/**
 *  @Classname:CorsConfig
 *  @Description: 配置验证码的跨域
 *  @author: xxx
 *  @date: 2022/4/19 12:09
 */
@Configuration
public class CorsConfig {
    private static final String MAX_AGE = "18000L";

    @Bean
    public WebFilter corsFilter() {
        return (ServerWebExchange ctx, WebFilterChain chain) -> {
            ServerHttpRequest request = ctx.getRequest();
            if (CorsUtils.isCorsRequest(request)) {
                HttpHeaders requestHeaders = request.getHeaders();
                ServerHttpResponse response = ctx.getResponse();
                HttpMethod requestMethod = requestHeaders.getAccessControlRequestMethod();
                HttpHeaders headers = response.getHeaders();
                headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, requestHeaders.getOrigin());
                headers.addAll(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS, requestHeaders
                        .getAccessControlRequestHeaders());
                if (requestMethod != null) {
                    headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS, requestMethod.name());
                }
                headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
                headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, "*");
                headers.add(HttpHeaders.ACCESS_CONTROL_MAX_AGE, MAX_AGE);
                if (request.getMethod() == HttpMethod.OPTIONS) {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }

            }
            return chain.filter(ctx);
        };
    }
}

posted @ 2022-04-20 19:04 地球小星星阅读(498) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 函数式编程-Stream流

· Grafana 安装

· CORS常用解决跨域的方法

· 跨域问题解决

· SpringBoot解决跨域问题

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球运作规律
· 上周热点回顾（3.3-3.9）

地球小星星