js加载文件跨域报错cross origin requests...

最新推荐文章于 2024-07-16 00:30:57 发布
原创 最新推荐文章于 2024-07-16 00:30:57 发布 · 3.8w 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #Http Server #跨域 #d3

本文介绍了在使用Ajax请求本地文件时遇到的跨域问题及解决方案，包括更换编辑器、安装Server插件、更换浏览器和配置Chrome支持file协议等。

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

本地Ajax跨域报错Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

照着教程使用D3来加载 json文件和csv文件时，发现并不能成功加载，会报下面这样的错误。
这里写图片描述
因为之前遇到过，大概知道原因在于使用了File协议，应该使用它提示的http, data, chrome, chrome-extension, https这些协议，可是只是写几个小Demo，不至于自己去创建一个服务器，开个端口吧。经过各方检索，发现了如下几种解决方案。

1.换编辑器T_T

使用webstorm或是visual studio这种重量级的IDE的同学，应该不会遇到这种问题，这类IDE都内置了HTTP服务器。
但是对于博主这种喜欢VSCode，sublime这类轻量级编辑器的人，还是想找一下别的解决方案。

2.安装Server插件: )

这里针对VSCode和Sublime安利一款插件。

VSCode

Live Server插件，这个插件功能十分强大，不止可以解决ajax不支持file协议的问题，还可以实现在编辑器里保存修改后，页面自动刷新的功能。具体使用方法在插件安装的地方有说明，用起来也十分简单。
安装完成之后，打开html文件后，点击右下角的GoLive 即可。
这里写图片描述

Sublime

SublimeServer插件，安装完成之后，点击Tools->SublimeServer->Start SublimeServer，启动服务器，然后在html文件中，注意是文件中点击右键，选择 View in SublimeServer即可。
（注意一定要以文件夹的方式打开html文件所在目录，否则可能失效。）
这里写图片描述

3.换浏览器T_T

火狐支持file协议，对Chorme没有什么执念的童鞋，可以换成火狐。

4.配置Chrome浏览器支持file协议

对于想博主这样很喜欢Chrome开发者工具的人，也可以尝试这种方式。

Windows：
设置Chrome的快捷方式属性，在“目标”后面加上–allow-file-access-from-files，注意前面有个空格，重新打开Chrome即可。

Mac：
打开终端，输入下面命令：open -a “Google Chrome” –args –disable-web-security然后就可以屏蔽安全访问了[ –args：此参数可有可无]

PS

只是更改浏览器配置使之支持file协议，还是有很大的局限性的，建议最好采用前两种方式，配置http服务器才是长久之计~

springboot(jeesite)跨域解决Cross origin requests are only supported for protocol schemes:
淘淘小窝
09-06 907
Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted。错误
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension
shaxixide的博客
04-11 489
Ajax跨域问题 参考：oschina 皮皮猫32 报错信息：js报错 XMLHttpRequest cannot load localhsot:8080. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extens...
前端 JS 经典：跨域的解决方案
weixin_64684095的博客
07-16 2145
浏览器为确保资源的安全，而遵循的一种策略。
js解决跨域下载文件
weixin_30843605的博客
08-13 3788
之前用的是a标签的方式，同源是没有问题的，但一跨域就不行了，试了其它方法，不是报跨域错误，就是在当前页面打开文件，体验相当不好。 data = data.replace(/\\/g, '/'); var aLink = document.createElement('a'); aLink.download = data.split('/')[data.split('/').le...
解决Ajax跨域问题：XMLHttpRequest cannot load XXX Origin XX is not allowed by Access-Control-Allow-Origin.
CMEguagua的博客
03-11 600
Warning: :1 XMLHttpRequest cannot load https://XXX/report?reportToken=624. Origin http://XXX is not allowed by Access-Control-Allow-Origin. Warning: Javascript alert: 请求失败 一：使用jsonp格式，如jquery中ajax请求参数 dataType:'JSONP'。 二：<meta http-equiv="Access-C..
html js加载本地文件报错处理，跨域问题
野生猿-群号1025127672
01-03 1925
解决方法是搭建一个本地服务器，然后从这个服务器访问这个html文件，这样html和其他资源文件，会被浏览器判定为同一个域。首先下载node.js的windows安装包，安装完以后，打开命令行，查询两个版本号，如果没有报错，就说明node.js和npm都安装好了。这个问题是怎么来的？然后打开我们的html文件就可以了，这时html中的js要访问这个文件夹及其子文件夹下的文件，就不会报错了。还有个问题就是，当修改了html文件以后，浏览器中的文件并不会更新，需要打开html并刷新页面才行。
静态页面调试JS出现跨域问题
T9Team的专栏
07-29 5224
在chrome浏览器或者firefox浏览器里，由于安全限制的原因，本地调试JS，如果不配服务器环境而直接打开页面，那所有的AJAX操作会抛出下面错误:   XMLHttpRequest cannot load file:///D:/file.html. Origin null is not allowed by Access-Control-Allow-Origin.   Origin
解决CROSS ORIGIN REQUESTS ARE ONLY SUPPORTED FOR PROTOCOL SCHEMES的三种办法
Willowtree的博客
04-18 1639
在学习模块化的时候遇到的一个问题，ES6引入的时候出现了这种问题 Access to script at 'file:///E:/DUYI/Code/NOTE/levelOne/13.%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%A6%E7%BB%86/04ES6%E6%A8%A1%E5%9D%97%E5%8C%96/03%E9%BB%98%E8%AE%A4%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA/module/index.js' from origin
Failed to load file:///E:/Git/cpipec/app/static/searchType.json: Cross origin requests are only supp...
weixin_30917213的博客
10-30 170
报错信息：Failed to load file:///E:/Git/cpipec/app/static/searchType.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 报错方式：Chrome浏览器打开本地jsp...
深入浅出FE（三）跨域Cross-Origin
前端产品工程师
02-17 901
目录 1. 跨域是什么 2. 为什么有跨域 2.1 防止csrf攻击 2.2 防止xss攻击 3. 跨域解决方案？ 3.1jsonp 3.2 "跨域资源共享"（Cross-origin resource sharing）CROS 3.3 document.domain + iframe跨域 3.4window.name + iframe 3.5 location.ha...
flutter webview加载本地文件出现跨域解决方案
weixin_43575775的博客
05-20 1662
flutter加载本地网页，网页加载flutter 的静态资源。使本地webview内部的网页也能够共享flutter的静态资源
VSCode访问本地json文件出现跨域文件，亲测有效，Cross origin requests are only supported for protocol schemes
m0_67658126的博客
11-10 198
解决本地json文件出现跨域问题
关于Chrome浏览器使用ajax访问本地文件报 Cross origin requests are only supported for HTTP
HelloEarth_的博客
08-02 575
刚刚开始学JS，发现有的时候运行别人的例子会报错Cross origin requests are only supported for HTTP 查了几个解决方案，看到 给浏览器传入启动参数（allow-file-access-from-files），允许跨域访问。 Windows下，运行（CMD+R）或建立快捷方式： "C:\Program Files (x86)\Google\Chro...
cross-origin requests descripetion
Allen_白的专栏
03-04 3523
Cross-origin resource sharing From Wikipedia, the free encyclopedia Cross-origin resource sharing (CORS) is a mechanism that allows JavaScript on a web page to make XMLHttpRequests to an
Chrome本地跨域 origin-null-is-not-allowed或者Blocked a frame with origin “null“ from accessing 解决方案（适用于前端）
The road to success is lonely
07-13 9074
本地直接打开项目地址报错，地址栏里的地址：file:///C:/Users/Administrator/Desktop/HZ/register.html 谷歌不允许这样打开项目，所以产生了跨域问题。 解决办法：本地要起一个类似客户端运行的环境，我用的是vscode中的Live Server 然后打开需要运行的html页面，点击如图所示的位置即可运行起来 在浏览器打开的地址一般是：http:/...
本地Ajax跨域报错Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-
weixin_38752368的博客
12-14 291
因为之前遇到过，大概知道原因在于使用了File协议，应该使用它提示的http, data, chrome, chrome-extension, https这些协议，可是只是写几个小Demo，不至于自己去创建一个服务器，开个端口吧。经过各方检索，发现了如下几种解决方案 1.换编辑器T_T 使用webstorm或是visual studio这种重量级的IDE的同学，应该不会遇到这种问题，这类I...
读取本地数据失败：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-e
热门推荐
Rachel_CT的博客
07-04 1万+
好久没来写博客了，最近又遇到一个问题就是在用js读取本地json文件中的数据时读取失败，因为一时没有找到怎么回事就暂时放一边了，但是隔了两天在读取csv文件时发现了同样的问题，见下图： 然后网上找了各种方法，提到最多的一种就是在浏览器属性目标后面加上“ allow-file-access-from-files”，刚开始试了好多次都不起作用。网上也有很多人说这个方法没什么用，所以自己也...
javascript之使用链接跨域下载图片
harmsworth的博客
11-25 1万+
下载图片前言外链下载注意 前言 图片是最常见的静态资源文件，可以从本地、外链获取图片，或者使用base64码展示。而canvas的toDataUrl() API可以将图片转base64码，然后模拟点击事件即可下载图片。 外链下载 在本地或者网站下载外链url图片时涉及到跨域，跨域会暴露自己的隐私，浏览器对跨域请求进行了限制，故需要设置crossOrigin为anonymous来允许跨域，浏览器会...
本地文件系统跨域请求
m0_53842576的博客
09-21 257
如果你在本地创建的网页上点击按钮时出现 "Network error" 错误，那么通常这是由于浏览器的安全策略引起的。：将你的网页部署到本地服务器上（例如，使用Node.js创建一个简单的本地服务器），然后通过服务器地址而不是文件系统路径来访问你的网页。：有些浏览器可能允许你通过修改安全设置来允许本地文件系统的跨域请求，但这通常不是一个建议的方法，因为它会降低安全性。：查看浏览器的开发者工具控制台，看是否有更详细的错误信息。：确保你的 Axios 请求使用绝对路径而不是相对路径。
springboot以配置跨域，vue请求跨域报错
最新发布
03-26
### Spring Boot 配置跨域允许 Vue 请求 为了使 Spring Boot 应用能够正确处理来自 Vue 的跨域请求并解决 CORS 错误，可以通过多种方式进行配置。以下是几种常见的解决方案： #### 局部配置：使用 `@CrossOrigin` 注解 可以在具体的控制器类或方法上添加 `@CrossOrigin` 注解来实现局部的跨域支持。这种方式适用于特定接口的跨域需求。 ```java import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController @CrossOrigin(origins = "http://localhost:8080") // 替换为前端Vue应用的实际地址 public class DepartmentController { @GetMapping("/depts") public List<String> getDepartments() { return Arrays.asList("Dept1", "Dept2", "Dept3"); } } ``` 这种方法简单易用，但对于全局范围内的跨域设置可能不够灵活[^2]。 #### 全局配置：通过 WebConfig 类 如果希望在整个应用程序范围内启用跨域支持，则可以创建一个自定义的 `WebMvcConfigurer` 实现类来进行全局配置。 ```java import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有路径生效 .allowedOrigins("http://localhost:8080") // 替换为实际的前端域名 .allowedMethods("GET", "POST", "PUT", "DELETE") // 支持的方法类型 .allowCredentials(true); // 是否允许携带凭证（Cookie） } } ``` 此方式更加全面且易于维护，尤其适合复杂的多模块项目[^1]。 #### 结合 Spring Security 使用 CorsFilter 当项目引入了 Spring Security 后，默认的安全策略可能会覆盖掉原有的 CORS 设置。因此需要显式地配置 `CorsConfigurationSource` 并将其注册到过滤器链中。 ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.http.SessionCreationPolicy; import org.springframework.security.web.SecurityFilterChain; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; import java.util.Arrays; public class SecurityConfig { @Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests().anyRequest().permitAll(); http.addFilterBefore(corsFilter(), UsernamePasswordAuthenticationFilter.class); return http.build(); } private CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:8080"); // 替换为实际的前端域名 config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } } ``` 这种做法特别重要，在安全框架存在的情况下能有效防止因默认行为而导致的 CORS 报错现象[^3]。 --- ### 注意事项 - 如果设置了 `.allowCredentials(true)` ，则不允许将 `allowedOrigins` 设定为 `"*"` 。这会引发冲突，需指定确切的源地址。 - 确保前后端开发环境中使用的端口号一致或者按照实际情况调整上述代码中的 URL 地址部分。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值