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

最新推荐文章于 2024-07-17 16:37:19 发布
最新推荐文章于 2024-07-17 16:37:19 发布
阅读量4.9k 收藏 6
点赞数 1
分类专栏： 问题解决 文章标签： ajax跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhishidi/article/details/119342198
版权

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")
        ;
    }
}

完美

zhishidi
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
postman测试是否支持跨域_POSTMAN接口测试
weixin_39618456的博客
12-22 4602
请不要问我为何知道这么详细,-----以上纯属废话-----本文根据接口文档来的, 若只是测试接口, 请绕行首先在 collection 下建立文件夹, 以储存自己的接口测试的信息建立文件 储存接口数据文件夹右击 => Add Request或者像这样,点击地址栏上面 + 号,再save到shop文件名最好用 : 接口基准地址{url}/ + 请求路径就像我这样, 除了能较为快速找到想要的东...
URL的绝对地址和相对地址以及跨域访问
YING_XI的博客
11-12 1876
绝对路径 url开头为一个斜杠"/"，这个斜杠说明这个请求从根目录去访问,这个是绝对路径。 例子： $.ajax({ url:’/index/list’, type:‘json’, success:function() { console.log(‘OK’); }}); 相对路径 相对路径就是相对于html页面路径的路径，记住，不是相对于请求的JS文件的路径。 例子：示例1：请求地址为url:‘userinfo’ 最终请求的地址为：www.demo.com/user/profil..
测试接口跨域
weixin_45291798的博客
04-08 403
【代码】测试接口跨域。
后端接口允许跨域访问
最新发布
qq_33192454的博客
07-17 257
为了在后端接口中允许跨域访问（CORS），你需要在你的Spring Boot项目中配置CORS。
简单测试接口是否支持跨域
01-02
检查接口是否支持跨域请求，一个简单的ajax请求测试方法
判断接口是否支持跨域
ltochange的博客
05-23 3302
打开浏览器，右键，选择检查，选择console 输入测试代码，然后回车，正常返回即可跨域请求 get请求 var xhr = new XMLHttpRequest(); xhr.open('GET', 'url'); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responseText); } post请求： var httpRequest = n
前端如何快速测试后端接口是否跨域
u012804473的博客
11-02 650
直接打开浏览器任意一个页面。F12，复制以下代码。无法打印则会报跨域的错误。背景：我是前端开发，有时候与各方对接接口时会碰到跨域问题。后端说已经做了跨域处理。
判断API接口是否支持跨域
qq_37290531的博客
03-22 4065
进入浏览器开发者控制台，在控制台输入如下请求，接口地址更改为所需要检测的地址 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.xxx.com/api/action'); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responseText); } 因为我这里是随便设置的一个地址是无效的所以出现请求超时了
js判断请求的url是否可访问,支持跨域判断的实现方法
10-21
下面小编就为大家带来一篇js判断请求的url是否可访问,支持跨域判断的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
新手偶遇跨域问题
syhdeclan的博客
07-06 187
之前一直用的是axios（）然后直接在里面传一个整体的params参数，然后会发现每次请求的url并不仅仅是post的API了，好像把参数像类似get的方法 带到了后面，然后换成了axios.post 里面传参数，就可以规避url变了的问题，然后又试了试，发现把params变成一开始的data可以避免这个问题，可能params就是强行变成get 或者是拥有get特性，data就是post吧，可是我...
JS跨域
尊哥的博客
04-28 347
一、什么是跨域 在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略），由于浏览器这个同源策略，凡是发送请求的url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表： 如果你进行了跨域请求，你在浏览器控制台就会看到以下提示： XMLHttpRequest cannot load http://external-d...
Vue如何设置跨域，当年在跨域踩过的那些坑
热门推荐
qq_41756364的博客
04-18 1万+
最近在学习Vue+element搭建一个后台管理项目。在实现跨域开发时踩过的那些坑。 1、开发环境下，如何做好跨域配置     首先跨域我们要配置的文件有：config下的index.js         dev: {             proxyTable: {                 '/api': {                         targe...
非权威指南-浏览器跨域请求解决方案
huang_T_ang的博客
12-13 361
前言 本文所使用的完整代码.可在github仓库获得 博主的个人博客,欢迎来玩 1. 同源策略 1.1 起源 谈到跨域问题就不得不先谈谈同源策略。 同源策略(Same Origin Policy) 是 Netscape 提出的目前所有浏览器都在实行的一个安全政策。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，是一种用于隔离潜在恶意文件的重要机制。 同源策略会限制不同...
测试接口是否支持跨域
imcholl的博客
05-05 2303
通常情况，前后端项目分离，后端需要设置允许跨域，跨域配置完成后，如何测试接口跨域是否成功？ 方案如下： 新建HTML文件，将下面代码拷贝，运行即可。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨域测试</title> <!-- Required meta tags --> <meta ch
接口跨域及测试
qq_44109896的博客
01-17 2523
1.跨域 1.spring 版本4.2以上可以使用@CrossOrigin注解 import org.springframework.web.bind.annotation.CrossOrigin; @CrossOrigin @RequestMapping("/centerLogin.action") @ResponseBody public Object ce...
测试是否可以跨域访问
dhdhdh0920的专栏
06-15 1964
使用浏览器开发者工具中的Console工具 比如谷歌浏览器，F12打开开发者工具，将以下代码粘贴到控制台，然后回车 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://192.168.1.100:8080/test/users'); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responseText); } .
Spring API 的 CORS 测试
HONEY MOOSE
11-04 541
在开发 API 和前端的时候，最麻烦的就是一个 CORS 测试。 你不知道你的 API 是否允许 CORS，也不知道是不是因为前端的原因。 但是 CORS 这个跨域访问确实让人非常头疼。 ## 写个页面 为了解决这个问题，我们用 HTML 写了个页面，这个页面可以对跨域访问进行一些小测试。 请查看页面在 GitHub 上的完整源代码： https://github.com/cwiki-us-demo/java-tutorials/blob/master/src/main/resources/htm
Nginx系列——解决跨域与接口可用性探测
博渊的博客
11-18 949
Nginx系列 入门——Nginx系列——配置详解 进阶——Nginx系列——负载均衡配置 进阶——Nginx系列——解决跨域与接口可用性探测 进阶——Nginx系列——缓存解决接口性能问题         No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not a
如何确定出现跨域问题 CORS
山茶树和葡萄树
02-20 995
跨域出现问题： 首先：Web 端先确定请求是否开启 credentials，（Requests with credentials） 然后：再确定 API 是否 origins、allowedHeaders、allowCredentials、allowedMethods 之类设定 See Also HTTP访问控制（CORS） - HTTP | MDN Getting Started | Ena...
组合式API 访问后端接口完成跨域交互代码怎么写
04-02
跨域交互是指在浏览器中，通过JavaScript代码从一个域名下的网页向另一个域名下的网页发送请求。由于浏览器的安全机制，不同域名下的网页不能直接访问对方的资源，需要使用组合式API进行访问。 下面是一个使用组合式API访问后端接口完成跨域交互的示例代码： ``` // 创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的方法和URL xhr.open('GET', 'http://example.com/api/data', true); // 设置响应的数据类型 xhr.responseType = 'json'; // 设置请求头信息 xhr.setRequestHeader('Content-Type', 'application/json'); // 发送请求 xhr.send(); // 监听请求的响应 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 获取响应的数据 var data = xhr.response; // 处理响应的数据 console.log(data); } }; ``` 在这个示例代码中，首先创建了一个XMLHttpRequest对象，并设置了请求的方法和URL，然后设置了响应的数据类型和请求头信息，最后发送请求。 在监听请求的响应时，判断请求的状态是否为4（即请求完成），状态码是否为200（即请求成功），如果都满足，则说明请求成功，可以获取响应的数据并进行处理。 需要注意的是，由于浏览器的安全机制，使用组合式API进行跨域交互时，需要使用CORS（跨域资源共享）或JSONP（JSON with Padding）等技术来实现。在使用CORS时，需要在后端接口中设置响应头信息，允许指定的域名访问该接口。而在使用JSONP时，需要在前端代码中使用一个回调函数来处理响应的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值