axios跨域问题解决方法（访问本地文件json数据时）

已于 2022-03-03 23:34:17 修改
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 经验记录 JS 文章标签： css javascript 前端
于 2022-03-03 22:18:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wykqh/article/details/123265366
版权
博客内容讲述了在Chrome浏览器中遇到的跨源资源共享(CORS)政策问题，导致无法从本地文件系统访问XMLHttpRequest。解决方案是通过修改Chrome快捷方式的目标参数，添加`--allow-file-access-from-files`，允许浏览器访问本地文件。这对于开发者在本地调试和测试数据时非常有用。

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

错误信息如下：
Access to XMLHttpRequest at 'file:///D:/vscode/axios/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
在这里插入图片描述
解决办法：
浏览器快捷方式右键属性
在这里插入图片描述
然后在目标的最后面输入一个人空格之后加入参数--allow-file-access-from-files
目标里的内容最终长这样：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

前端解决vue-cli中axios请求本地json跨域问题
weixin_66399141的博客
05-21 2296
在根目录下vue.config.js文件（如果没有就新建js文件） 添加如下代码： module.exports = { // 配置跨域代理 devServer: { // Paths proxy: { '/example': { // 匹配所有以 '/example'开头的请求路径 target: 'http://localhost:18001/', // 目标地址 cha
react axios 跨域访问一个或多个域名问题
08-19
React Axios 跨域访问一个或多个域名问题是前端开发中的一种常见问题，该问题的解决方法有多种，本文将详细介绍 React Axios 跨域访问一个或多个域名问题的解决方法。 React Axios 跨域访问一个域名 首先，我们...
axios请求访问本地的同级的json文件,错误信息Cross origin requests are only supported for protocol schemes
qq_42272067的博客
11-20 675
axios请求访问本地的同级的json文件,产生错误信息：Access to XMLHttpRequest a xxx from origin 'null' has been blocked by CORS 具体错误信息如下：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. Access to XMLHttp
关于vue3项目总axios请求本地数据的跨域问题
最新发布
06-10 522
2、axios请求的地址使用柚皮中的设置的服务地址，且在C:\Windows\System32\drivers\etc中的host文件设置服务地址：127.0.0.33 local.ztapi.com。1、不使用php自带的服务器启用服务（php think run）3、在vite.config.js中添加设置跨域。4、在axios封装的http.js请求中设置。5、在需要请求数据的地方调用。
vue使用axios跨域请求数据问题详解
11-26
axios默认是没有jsonp 跨域请求的方法的。一般来说流行的做法是将跨域放在后台来解决，也就是后台开发人员添加跨域头信息。 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候，后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台，此时，前端就可以单独引入依赖解决该问题了。 引入依赖 cnpm install jsonp   导入到vue文件 import jsonp from 'jsonp' 使用方法（可以参考npm上 json
axios请求本地json报错404
weixin_52703987的博客
12-17 4804
1.方法一 使用vue cli老版本创建的vue项目 1.在vue项目根目录下的static目录下创建json文件。例如：data.json 2.在test.vue中获取本地json数据 import axios from 'axios' export default { name: "index", data() { return {}; }, mounted() { this.getData() }, methods
vue中axios解决跨域问题和拦截器的使用方法
08-27
解决Vue中axios跨域问题有多种方法，其中一种是在本地开发环境中通过配置代理解决。使用Vue CLI创建的项目，可以通过修改配置文件来设置代理。具体而言，可以在项目的config目录下的index.js文件中配置dev选项下的...
Access to XMLHttpRequest at file from origin ‘null‘ has been blocked by CORS policy谷歌浏览器本地打开项目js文件报错
了迹奇有没
02-14 5679
CORS 策略已阻止从源“null”访问“文件路径”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。
解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘fileDWebPractiesnewSmartCitydatafunData.json
web13618542420的博客
03-10 1614
解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at 'file:///D:/WebPracties/xxxxxx/data/funData.json 问题描述 解决办法一 解决办法二 解决方法三 问题描述 这几天做项目的时候，遇到这样一个问题，写了一个页面，用js动态的创建了一系列li，让其在页面上展示，获取数据的方式是通过json模拟，结果运行界面 的时候，出现了差错，我以为是代码写错了，仔细检查了一遍，发现代码，没有任何问题，看了一下报错原因，上网查了一下，发
网页端报错Access to XMLHttpRequest‘*‘from origin ‘*‘ has been blocked by CORS..Access-Control-Allow-Origi
qq_51553762的博客
12-13 4171
Tomcat需要在MyEclipse中重新部署。可能的原因是Tomcat被占用
Access to XMLHttpRequest at ‘ ‘ from origin ‘null‘ has been blocked by CORS policy问题解决
weixin_45510031的博客
04-18 3467
最大意的一种情况（本人就是这种，突然脑子断根弦），打开方式有问题。spring boot内嵌了tomcat，所以打开html文件的方式不能和servlet一样（servlet需要手动部署到tomcat目录下），不能直接去点击需要打开的html文件，而是。举个栗子：127.0.0.1:8080/login.html。但是试了好多都不行，在vscode下载了。语句是否正确，如果sql语句有问题也会出现该种情况。网上有很多关于此问题的解决方案，像。插件试了解决跨域问题仍然没有解决。
快速解决vue中js引入跨域问题
qq_43704742的博客
11-14 1805
Access to script at 'file:///.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. index.html:12 GET file:///******************
has been blocked by CORS policy问题解决方法
weixin_43947043的博客
04-11 7044
Ajax / html / js，has been blocked by CORS policy问题解决方法 问题描述 在练习js的过程中用到ajax，总是console出现报错：Access to XMLHttpRequest at ‘file:///Users/XXX/Downloads/nav/nav.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported f
vite创建的项目，打包后的文件本地预览报错 Access to script at ‘...‘ from origin ‘null‘ has been blocked by COR
小白成长记
08-29 4483
http-server -p 8090 // 8090为自己设置的端口号，不要跟之前打开的冲突即可。打包后的文件打开报错，原因是file文件不支持import，需要开启个服务。打开图中地址即可访问打包后的项目。进入打包后的文件夹，运行cmd。...
Vue通过axios与java交互，并解决跨域问题
编码小王子
12-28 3677
原 浅谈Vue.js与后端API交互——axios的应用 2017年12月22日 15:25:48 辰煦湲 阅读数：21319 </div> <div class="operating">...
【插件】cors：vscode cors扩展 - 解决跨域开发最终版
Mcky_Love的博客
04-01 6504
说在前头 解决跨域的方式不下7 8种，类似的文章我也发表过，但开发路上总会遇到一些奇奇怪怪的限制，让你始终没法easy调试，这次我干脆写了个vscode扩展，伴随开发工具一起完灭Access-Control-Allow-Origin 一、下载 vscode扩展应用商店搜索“cors”下载即可 2、分步式处理 const test = a => { a++ return b =&...
关于vue使用axios post发送json数据跨域请求403的解决方法
热门推荐
春虫虫丶丶丶的博客
08-17 10万+
最近使用vue框架开发项目的时候， 遇到了一个问题，其实这个问题在之前就已经遇到过，不过因为当时没有时间，所以采用了另外一种方法解决。今天再次遇到这个问题，就铁了心解决，在网上找到很多资料，经过尝试都没有能够很好解决，经过自己的一番折腾终于将这个问题解决。 原文已更新，请耐心往下看哦！ 1. 问题 vue开发的时候，使用axios跨域发送请求，同时post发送的数据格式是json格式，发送出...
axios跨域请求中“Content-Type:appliction/json”解决方案
qq_45593068的博客
04-18 1897
问题：（我采用的是new URLSearchParams()） axios.defaults.timeout = 1000; // 全局axios超时时间为1s,超过即返回错误 axios.defaults.baseURL = 'http://127.0.0.1:3000/'; // 全局的axios的基础路径 axios.defaults.headers.common['toke...
Vue3中使用Axios解决跨域问题的源码分析
这包括了如何在Vue.js项目中配置axios以解决跨域问题，包括但不限于设置代理服务器、修改axios的请求头、使用第三方插件或者中间件等方法。源码中将详细展示如何在Vue组件的生命周期钩子中发起请求，以及如何处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博刻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值