# chrome异步加载本地json文件报错:cross origin request are only supported for HTTP

问题:定义了一个studentInfo.json文件存储学生相关信息,在index.html中想通过$.getJSON("studentInfo.json" , function(data){...})方法获取并显示json文件中的内容。结果运行后chrome报错如下:
cross origin request are only supported for HTTP

思考: google一下,似乎是Ajax跨域问题。

什么叫跨域?字面理解,跨是跨越,域是别的服务器,跨域就是到别的服务器上取东西。报错的意思应该就是chrome下,跨域请求只能通过通过这些协议标准实现:http、data、https、chrom-extension、chrom-extension-resource。

只要协议、域名、或端口有任何一个不同,就会被当做是不同的域。

但是仔细再一想,我请求的是本地文件啊,没有通过服务器请求啊,应该不算跨域么?什么鬼

再查发现,chrome在读取本地相对路径脚本时,禁止向第三方请求数据。 (只要是通过file://方式访问,或者直接拖进浏览器访问,都叫本地运行) 什么叫第三方?那就是不管本地文件、还是服务器url 文件都不行。

好吧,那就知道怎么解决了。

解决一:
在sublime里面 启动sublimeServer,开启服务器模式,在浏览器中通过localhost:8080/index.html访问,再看 debug tool,没有报错了,完美!~成功访问到本地json文件。

好奇助我成长,顺手拖进火狐测了一下,并没有报错
FireFox : 允许读取本地相对路径脚本。

解决二:
查资料,发现还有一种解决方法,不用启动服务器模式,直接更改chrome的设置就行。
在chrome属性设置中,添加启动参数:
--allow-file-access-from-files : 允许本地Ajax请求,也叫file协议下的Ajax请求
--enable-file-cookies : 允许chrome保存本地设置cookie

设置方法:chrome快捷方式–右键“属性”–快捷方式–目标
chrome添加启动参数

### 解决CORS政策阻止来自null的跨域请求问题 当遇到浏览器控制台提示`No 'Access-Control-Allow-Origin' header is present on the requested resource.`这样的错误信息时,表明服务器端未配置允许特定源发起的HTTP请求[^3]。 对于解决由CORS策略引发的跨域请求被阻拦的问题,可以采取如下措施: #### 修改服务端响应头 为了使客户端能够成功接收到来自不同源的数据,在服务端返回数据的同时需附加必要的HTTP头部字段。具体来说就是向响应中加入`Access-Control-Allow-Origin`这一项来声明哪些域名下的页面有权限访问资源。如果希望任何站点都可以获取到API接口所提供的资料,则可将其值设为通配符星号(*);不过出于安全性的考量,更推荐的做法是指定确切的信任地址列表[^4]。 ```java // Java Servlet 示例 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置允许所有来源访问 response.setHeader("Access-Control-Allow-Origin", "*"); // 或者指定某个具体的URL作为可信源 // response.setHeader("Access-Control-Allow-Origin", "http://example.com"); PrintWriter out = response.getWriter(); ... } ``` 值得注意的是,除了上述提到的基础属性外,还有其他一些可能需要用到的相关参数也需要视情况而定进行调整,比如是否支持凭证携带(`Access-Control-Allow-Credentials`)以及预检请求所涉及的方法类型和请求头(`Access-Control-Request-Methods`, `Access-Control-Request-Headers`)等[^5]。 另外需要注意的一点是,“null”的Origin通常意味着加载环境不是标准的安全上下文(例如文件协议),这可能是由于本地测试或某些特殊场景造成的。针对这种情况,建议尽可能地在一个正式的服务环境中部署应用并确保其具有有效的HTTPS证书,从而获得一个合法而非空字符串形式的origin值[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值