如何判定API接口是否支持跨域访问

最新推荐文章于 2024-08-30 16:12:51 发布

zhishidi

最新推荐文章于 2024-08-30 16:12:51 发布

阅读量5.5k

点赞数 1

分类专栏：问题解决文章标签： ajax跨域问题

本文链接：https://blog.csdn.net/zhishidi/article/details/119342198

版权

问题解决专栏收录该内容

53 篇文章

订阅专栏

1.背景

同一个h5页面需要访问多个不同的域名下的地址

2.判定方式

方式一

在浏览器控制台执行如下代码:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://XXXX.XXX.com/api/order/query'); // 测试时改为自己的地址
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

如果能正常拿到接口结果说明支持跨域,结果如下

如果返回如下结果,说明不支持跨域:

方式二

编写如下html文件,直接访问html,如果不能正常访问则不支持跨域

<html>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://xxx.xxx.com/api/order/query'); // 换为自己的接口地址
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}
</script>
</html>

3.springboot的java接口如何实现跨域

增加如下代码

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("*")
                .allowedHeaders("Content-Type", "X-Requested-With", "accept,Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers", "token")
        ;
    }
}