js 解决Ajax 读取本地文件时的跨域问题

墨蓝 2023-06-12 06:20 11阅读 0赞

## js 解决Ajax 读取本地文件时的跨域问题 ##

今天在做实验时发现了一个问题，用Ajax读取本地文件时一直报跨域错误，错误如下

![在这里插入图片描述][20191031192120495.png]  
自己捣鼓了许久没搞出来各种浮想连篇，最终在错误提示的文件路径发现，他是从本地服务器上取文件，那是不是应该用localhost:端口号 的方式去访问呢？（也可以使用live-server）于是便试了下，还真如此。改动如下：  
![在这里插入图片描述][20191031192812934.png]  
![在这里插入图片描述][2019103119261152.png]

为了使大家能更好理解还是附上源码了

<script>
        window.onload = function () { 
          var Ajax;
          if (window.XMLHttpRequest) {  //非IE
            Ajax = new XMLHttpRequest();
          } else if (window.ActiveXObject) {  //IE
            Ajax = new ActiveXObject("Microsoft.XMLHTTP");
          }
          Ajax.open("get", "expmt.json", false);
          Ajax.send()
          if (Ajax.readyState == 4) { 
            if (Ajax.status >= 200 && Ajax.status < 300 || Ajax.status == 304) { 
              console.log(Ajax.responseText);
            } else { 
              console.log(Ajax.status)
            }
          }
        }
      </script>

解决收工，祝大家生活愉快

[20191031192120495.png]: /images/20230531/51cd56d93ebb41edaca279a84109ffd6.png
[20191031192812934.png]: /images/20230531/eae7fc5477be4172805183f8f42b08b5.png
[2019103119261152.png]: /images/20230531/42b481599ead4bb38ac66032e57193f8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax本地跨域请求以及解决方法

什么是跨域？我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源，

曾经终败给现在/ 2024年03月26日 21:24/ 0 赞/ 95 阅读

相关 js 解决Ajax 读取本地文件时的跨域问题

js 解决Ajax 读取本地文件时的跨域问题今天在做实验时发现了一个问题，用Ajax读取本地文件时一直报跨域错误，错误如下 ![在这里插入图片描述][20191031

墨蓝/ 2023年06月12日 06:20/ 0 赞/ 12 阅读

相关 ajax读取json文件 / 跨域问题

结论：前端无法异步读取file协议等资源，尝试了各种办法（给谷歌浏览器添加运行参数），无法解决，除了搭建服务器至于在浏览器打开html页面和json文件，都可以成功，原因在

水深无声/ 2023年01月07日 01:28/ 0 赞/ 153 阅读

相关 java ajax 跨域_解决ajax跨域访问问题

前端js: $.ajax(\{ url:'http://localhost/xxxx/test', //后台处理程序 async:true, type:'get',

末蓝、/ 2022年11月03日 10:53/ 0 赞/ 316 阅读

相关 ajax跨域和js跨域解决方案

ajax跨域和JS的跨域通信(Cross The Site)的几种解决方案最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题，但是放到二级

﹏ヽ暗。殇╰゛Y/ 2022年09月25日 09:23/ 0 赞/ 262 阅读

相关 html ajax 跨域6,AJAX | 跨域的基本知识、如何解决跨域问题

AJAX跨域相关问题 HTML5学堂：AJAX跨域相关问题。在AJAX交互中，实现了网页的异步交互。但是，如果需要向非同域名下发送请求时，涉及到了AJAX跨域。本文主要讲解了

亦凉/ 2022年09月03日 06:18/ 0 赞/ 284 阅读

相关解决ajax的跨域问题

跨域：协议，域名，端口不一样就是跨域。比如：你的服务器域名是www.test.com,而去请求的域名是www.demo.com,就是跨域。注意127.0

梦里梦外;/ 2022年06月18日 09:19/ 0 赞/ 277 阅读

相关 Jsonp解决ajax跨域问题

一、介绍 > 最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份

ゞ浴缸里的玫瑰/ 2022年05月20日 01:05/ 0 赞/ 363 阅读

相关解决ajax跨域的问题

ajax跨域的原理： ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”，“同源”是指协议相同、域名相同和端口相同。同源的策略是为了保证用户的信息安全防止网站

Love The Way You Lie/ 2022年03月11日 06:16/ 0 赞/ 351 阅读

相关 js ajax 跨域问题解决方案

什么是跨域问题? 跨域问题来源于JavaScript的"同源策略"，即只有协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操

淩亂°似流年/ 2021年08月29日 22:26/ 0 赞/ 620 阅读