解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///D:/WebPracties/newSmartCity/data/funData.json

最新推荐文章于 2025-05-07 16:32:13 发布
最新推荐文章于 2025-05-07 16:32:13 发布
阅读量5w 收藏 148
点赞数 60
CC 4.0 BY-SA版权
分类专栏： nginx及跨域 文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/114641303
本文介绍了在本地开发中遇到的浏览器跨域问题及其解决方案，包括临时关闭浏览器安全设置、创建特殊配置的浏览器快捷方式以及使用VSCode Live Server插件。通过这些方法，可以成功运行涉及跨域的项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at 'file:///D:/WebPracties/xxxxxx/data/funData.json

问题描述

这几天做项目的时候，遇到这样一个问题，写了一个页面，用js动态的创建了一系列li，让其在页面上展示，获取数据的方式是通过json模拟，结果运行界面 的时候，出现了差错，我以为是代码写错了，仔细检查了一遍，发现代码，没有任何问题，看了一下报错原因，上网查了一下，发现是ajax跨域问题。
先看一下报错的样子
在这里插入图片描述

解决办法一

首先声明，这种方式只是暂时的，浏览器一经关闭则不起作用了。以谷歌浏览器为例
首先，找到你浏览器安装的位置，一般默认安装的位置C:\Program Files\Google\Chrome\Application
然后、在该目录打开命令行，直接在文件夹导航栏输入cmd，敲回车
在这里插入图片描述
回车之后就进入了cmd命令行
在这里插入图片描述
最后只需要输入一条这样的命令
chrome.exe --disable-web-security --user-data-dir=C:\MyChromeUserFata
在这里插入图片描述
然后敲回车就会自动进入一个页面

最低0.47元/天 解锁文章

200万优质内容无限畅学
Access to XMLHttpRequest at ‘file:///C:/Users/Lenovo/Desktop/%E4%B8%93%E5%91
qq_45947664的博客
09-13 1万+
3、问题解决，编译器直接跳转默认编辑器，打开工作区页面，5500是live server自动分配的端口，如果没有自动跳转，就新建终端，输入“live-server --port=8081”，ps：8080端口可能被占用。1、使用VSCode的话 下载Live Server插件，通过安装这个插件就可以使用http协议打开file本地文件页面。4、点击Fn+F12查看，没有报错信息。5、此方案行不通的话，请移步。2、点击Go Live。
解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘fileDWebPractiesnewSmartCitydatafunData.json
m0_67402823的博客
03-02 1269
解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at 'file:///D:/WebPracties/xxxxxx/data/funData.json 问题描述 解决办法一 解决办法二 解决方法三 问题描述 这几天做项目的时候，遇到这样一个问题，写了一个页面，用js动态的创建了一系列li，让其在页面上展示，获取数据的方式是通过json模拟，结果运行界面 的时候，出现了差错，我以为是代码写错了，仔细检查了一遍，发现代码，没有任何问题，看了一下报错原因，上网查了一下，发
Ajax和XMLHttpRequest
weixin_33709219的博客
09-26 673
Ajax和XMLHttpRequest我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。以下是我认为对Ajax较为准确的解释：（摘自what is Ajax）AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creatin...
直接通过 file:// 协议访问本地文件时，
最新发布
qq_42463588的博客
05-07 293
我们可以使用 iframe 或者直接在 HTML 中引入组件内容。// 页面加载完成后加载组件。// 按顺序加载所有组件。
VUE 出现Access to XMLHttpRequest at 'http://192.168.88.228/login/Login?phone=19939306484&password=111'...
weixin_30480583的博客
04-24 1万+
报错如上图！！！！ 解决办法首先打开 config -> index.js ，粘贴 如下图代码，'https://www.baidu.com'换成要访问的的api域名，注意只要域名就够了，不是整个api地址。代码（效果图）如下 更改完以后，还需要我们把src/mains.js 中的 axios.defaults.baseURL = 'http://www.baidu....
access to xmlhttprequest at_现在最火的圆珠笔组装手工活不收押金,别看不起日赚几十,累积就是财富!--at...
weixin_39860946的博客
11-07 450
现在最火的圆珠笔组装手工活不收押金,别看不起日赚几十,累积就是财富!微信打字赚钱，很多人都会看到广告宣传，这是为什么呢？因为每个咨询这份兼职，想要做这份兼职的人都要帮忙转发宣传，这是门槛任务，所以才会有这么多人看到微信打字赚钱。那么这份兼职工作靠谱吗？事实并不是这么美好。小编推荐正规兼职详情加微信：81153664(手机用户认准第一个加为好友，谨防上当受骗)fuGat-lib网站目录fuGat-...
项目报错Access to XMLHttpRequest at http://localhost:8080 from origin http://localhost:8081(前后端分离解决跨域问题)
qq_64734490的博客
11-09 6249
跨域是指浏览器的同源策略限制下，一个域（网站）下的脚本试图去请求另一个域（网站）的资源。同源策略是浏览器的一种安全机制，用于限制一个源的文档或脚本如何与另一个源的资源进行交互，它要求协议、域名和端口都相同，如果这三个中的任何一个不同，就会产生跨域问题。
Access to XMLHttpRequest at ‘http://localhost:9001/eduservice/subject/getAllSubject‘ from origin ‘ht
weixin_55720539的博客
03-19 1842
跨域问题： 1.可以查看路径是否不一样 2.查看controller层是否加了@CrossOrigin 3.看看是不是前后端请求方法不一致
Access to XMLHttpRequest at ‘http://127.0.0.1:8080/xxx’ from origin ‘http://192.168.1.103:8096’ has
城南蝈蝈
10-07 3573
但是这个方法明显也不适合我，第一是用的手机APP，用ionic，ionic.config.json当中没有配置代理的情况下访问A和B这两个后台只有B会出现跨域问题，说明不是这个问题。豁然开朗，因为发送请求时，会先发送一个OPTIONS，而这个配置，因为没有登录的原因，禁止使用，而前台的OPTIONS请求没有得到相应，就不能继续发送其他类似GET或者POST请求，这样就会出现跨域问题。而且，前台发生请求时，会发送两次请求，一次是options,options通过后发送get或者post请求。
Access to XMLHttpRequest at ‘http://localhost:8880/v1/user/login‘ from origin ‘http://localhost:9999
weixin_57714644的博客
12-16 889
CORS(Cross-Origin Resource Sharing 跨域资源共享)：当请求来自不同的主机地址、不同的端口号、服务器不一致时，都被认为是跨域请求。5.在IDEA后端控制台也可以看到打印出来的用户信息。1.在config包下新建一个WebConfig类。2.编写自己的请求策略代码，写完以后重启后端工程。3.在浏览器注册页面填写表单测试信息，点击提交。4.可以在控制台看到成功状态码与对应消息。针对上面报错信息，可能与跨域情况有关。注：后端发送请求对应方法中添加日志注解。
报错：Access to XMLHttpRequest at ‘file:///c:/user/xxx/Desktop/xxx/aaa.json‘
weixin_42401268的博客
03-20 2701
本地测试一个小的demo，需要根据不同情况读取不同json文件配置。结果发现报错。
Access to XMLHttpRequest at ‘http://localhost:8011/sockjs-node/info?t=1661849072906‘ from origin...
weixin_44768683的博客
08-30 1687
Access to XMLHttpRequest at 'http://localhost:8011/sockjs-node/info?t=1661849072906' from origin...
解决Access to XMLHttpRequest at ‘http://localhost:9091/login‘ (redirected from ‘http://localhost:9090/
一株木樨的博客
10-23 4759
解决Access to XMLHttpRequest at
Access to XMLHttpRequest at ‘http://localhost:8080/api/user/login‘ from origin ‘http://localhost...
qq_74344288的博客
07-17 8171
当你尝试从一个域名（http://localhost:8088）访问另一个域名（http://localhost:8080）的资源时，浏览器会执行一个安全检查，以确保请求是合法的。如果目标服务器没有正确配置CORS策略，浏览器将阻止这个请求。要解决这个问题，你需要在服务器端（http://localhost:8080）配置CORS策略，允许来自http://localhost:8088的请求。1.这个问题是由于CORS策略阻止了带有凭证的请求。在配置类中，你可以配置全局的CORS设置。
Access to XMLHttpRequest at ‘http://localhost:8088/upload‘ from origin ‘http://localhost:8080‘ has b
xiaofan空欢喜的博客
07-27 5985
Access to XMLHttpRequest at 'http://localhost:8088/upload' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 前端访问后端链接这个错误，一般是跨域问题所导致的，在后端的接口上加入@CrossOrigin...
Access to XMLHttpRequest at ‘http://127.0.0.1:7700/course/admin/course/page‘ from origin ‘http://loc
qq_33240556的博客
02-08 583
这个错误提示是由于CORS（跨源资源共享，Cross-Origin Resource Sharing）策略导致的。当你从一个源（origin）向另一个源发起请求时，如果目标服务器没有明确允许发起请求的源访问其资源，浏览器会阻止这次请求。替换为您实际的应用地址，并根据需求调整。为了解决这个问题，需要在目标服务器（即。上运行的服务）上配置响应头以允许。
解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%
热门推荐
相濡以沫不如相忘于江湖.
09-16 14万+
Access to XMLHttpRequest at 'file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data,
Access to XMLHttpRequest at ‘http://localhost:8110/admin/edu/teacher/list/1/10‘ from origin ‘http://
youdexiang的博客
09-24 1120
浏览器控制台报出的错误： Access to XMLHttpRequest at ‘http://localhost:8110/admin/edu/teacher/list/1/10’ from origin ‘http://localhost:9528’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 解决方法：Controller方
Vue项目axios调用api出现跨域问题Access to XMLHttpRequest at xxxxxxxxxx
weixin_41201681的博客
09-12 5141
项目场景： Vue开发 问题描述： 提示：Vue项目axios调用api出现跨域问题Access to XMLHttpRequest at xxxxxxxxxx 就是调用api时，api地址前面是本地地址，而不是正确的api地址 下图本人要调用的是 http://api.weatherdt.com/common/?area=xxxxx&type=xxxx&key=xxxxxx 解决方案： 本文写的是前端解决方法！！！ 需要调用api： http://api.weatherdt.com/co
后端springboot解决Access-Control-Allow-Origin: http://example.com问题
03-13
### Spring Boot 解决 CORS 跨域配置 `Access-Control-Allow-Origin` 示例 #### 使用 @CrossOrigin 注解方式 在Spring Boot中，可以通过使用`@CrossOrigin`注解来轻松实现跨域资源共享的功能。此注解能够应用于整个控制器或者特定的方法之上。对于全局性的跨域需求，在类级别添加该注解即可；而对于某些特殊接口，则可以在对应的方法上面单独定义。 ```java @RestController @RequestMapping("/api") public class MyController { @GetMapping("/data") @CrossOrigin(origins = "http://example.com", methods = {RequestMethod.GET}) public ResponseEntity<String> getData() { return new ResponseEntity<>("Data from server", HttpStatus.OK); } } ``` 上述代码片段展示了如何通过指定允许访问的源以及HTTP方法来精确控制哪些客户端可以发起请求[^2]。 #### 配置 WebMvcConfigurer 实现更灵活的CORS支持 除了利用注解外，还可以借助于自定义配置类的形式进一步增强灵活性。创建一个新的Java类继承自`WebMvcConfigurer`接口，并重写其中的相关方法完成更加复杂的逻辑设定： ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有的路径都生效 .allowedOrigins("*") // 允许所有域名进行跨域调用 .allowCredentials(true)// 是否发送Cookie .maxAge(3600); // 提前预检缓存时间(s) } } ``` 这段程序说明了怎样一次性为多个API端点统一设置跨域规则，同时也指出了几个重要的参数选项及其作用。 当服务器接收到带有合法`Origin`字段值的请求时，它会在响应头部加入必要的CORS信息以便告知浏览器此次通信是被授权过的。例如，下面是一个成功的响应实例: ``` HTTP/1.1 200 OK Access-Control-Allow-Origin: http://api.bob.com Access-Control-Allow-Credentials: true Content-Type: application/json;charset=UTF-8 ... ``` 这里特别强调的是`Access-Control-Allow-Origin`这个头用来表明当前资源可被哪个站点所获取，而`Access-Control-Allow-Credentials`则决定了是否能携带认证信息（如Cookies）。这些细节都是为了确保安全性和功能性之间的平衡[^3]。 另外需要注意的一点是在实际项目部署过程中可能会涉及到预飞行(`OPTIONS`)请求处理的问题。比如当浏览器尝试发送一个非简单类型的HTTP动词（像DELETE, PUT等），或者是包含了额外的自定义Header的情况下，都会先触发一次这样的探测行为以确认目标服务端确实开放了相应的权限给到自己。此时如果一切正常的话，那么后续的实际业务交互就能顺利进行了[^4]。
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值