Access to XMLHttpRequest at 'file:///D:/vue/vue-first/data.json' from origin 'null' has been blocked by CORS policy

时间: 2023-12-25 20:03:35 浏览: 235

[js]轻便的XMLHttpRequest应用函数：downloadUrl()

`downloadUrl()` 函数是一个轻量级的 JavaScript 实现，用于执行 HTTP 请求，特别是与服务器进行数据交互。这个函数利用了浏览器内置的 `XMLHttpRequest` 对象或在旧版本的 Internet Explorer 中使用的 ActiveXObject 来实现异步通信。以下是关于 `downloadUrl()` 函数的详细解释： 1. **参数说明**： - `url`：必填参数，表示请求的目标 URL。 - `callback`：回调函数，当请求完成并接收到响应后，会调用此函数。回调函数有两个参数：`data` 和 `responseCode`。`data` 是服务器返回的数据，通常为 `responseText`；`responseCode` 是服务器响应的状态码，对应 `XMLHttpRequest` 的 `status` 属性。 - `data`（可选）：如果使用 POST 方法发送数据，此参数用于传递要发送的数据。如果使用 GET 方法，可以忽略此参数。 2. **用法**： - **用法一**：直接将回调函数作为参数传递。例如： ```javascript downloadUrl('http://www.ugia.cn/wp-data/test.htm', function (data, responseCode) { alert(data); // 在这里处理返回的数据 }); ``` - **用法二**：预先定义回调函数，然后在调用 `downloadUrl()` 时传入。例如： ```javascript function test(data, responseCode) { alert(data); // 在这里处理返回的数据 } downloadUrl('http://www.ugia.cn/wp-data/test.htm', test); ``` 3. **源代码分析**： - 函数首先检查 URL 是否包含问号 (`?`)，如果包含，则添加 `&`，否则添加 `?`，以便附加查询参数。 - 接下来，函数生成一个随机字符串，以避免缓存问题。在 URL 后添加此随机字符串。 - 如果没有指定 `data` 参数，则将其设置为 `null`。这将决定是使用 GET 还是 POST 方法。 - 函数创建 `XMLHttpRequest` 对象，对于不支持 `XMLHttpRequest` 的旧版 IE 浏览器，它会尝试创建一系列的 ActiveXObject。 - 随后，函数设置请求方法（GET 或 POST），并根据方法设置请求头，例如，对于 POST 请求，设置 `Content-Type` 为 `'application/x-www-form-urlencoded; charset=UTF-8'`。 - 函数调用 `open()` 方法打开连接，然后使用 `send()` 方法发送请求。由于是异步请求，所以 `downloadUrl()` 函数不会阻塞其他代码的执行，直到服务器响应并调用回调函数。 `downloadUrl()` 函数的核心价值在于它的简洁和易用性，对于简单的数据交换任务，它提供了一种无需依赖外部库的解决方案。然而，对于更复杂的场景，如处理跨域问题、错误处理、超时设置等，可能需要使用更全面的库，如 jQuery、axios 或 fetch API。但作为基础工具，`downloadUrl()` 易于理解和使用，尤其适合快速原型开发或对性能要求不高的项目。

回答: 这个错误是由于浏览器的CORS策略引起的。CORS是一种安全机制，用于限制跨域请求。当浏览器发现请求的源与目标不在同一个域时，会发送一个预检请求，检查目标服务器是否允许跨域请求。如果目标服务器没有正确配置CORS头部，浏览器就会拒绝该请求，从而导致这个错误。\[1\]\[2\] 对于你提到的具体错误，'file:///D:/vue/vue-first/data.json'是一个本地文件路径，而'null'是请求的源。由于这是一个本地文件请求，而不是通过HTTP协议请求，所以CORS策略不适用于这种情况。因此，你可以通过将数据文件放在与你的应用程序相同的域中，或者使用服务器来提供数据，以避免这个错误。 #### 引用[.reference_title] - *1* [Access to XMLHttpRequest at ‘http://xxx‘ from origin ‘http://xxx‘ has been blocked by CORS ...](https://blog.csdn.net/qq_41470439/article/details/109361842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: ...](https://blog.csdn.net/qq_42416602/article/details/121731774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Access to XMLHttpRequest at ‘http://xx‘ from origin ‘http://xx‘ has been blocked by CORS policy](https://blog.csdn.net/weixin_51603038/article/details/129319187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

阅读全文

Access to XMLHttpRequest at 'file:///D:/vue/vue-first/data.json' from origin 'null' has been blocked by CORS policy

相关推荐

高级软件人才培训专家-day03-Vue & Element

vue-resource-Vue.js的HTTP客户端。-Vue.js开发

Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin

vue发送请求时Access to XMLHttpRequest at 'http://localhost:60001/images/start/10' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

vue 报错Access to XMLHttpRequest at 'https://download.wuc0jp1e.com/d/image/dl?id=file%3A%2F%2F%2FpxLQEEmOvEVGF7WRPHirFFD8qtIST2yLCucESEuQ.png&enc=1' from origin 'http://localhost:7001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

vue Access-Control-Allow-Origin:

vue 403 Invalid CORS request

Vue3+vite+ts 本地访问正式服务器接口

axiosaccess

allow-cors-access-control插件

$.ajax中contentType: “application/json” 的用法详解

基于SpringBoot+VUE实现的客户管理系统源代码+数据库，课程设计

最新推荐

我的第一个C#小程序之简单音乐播放器1731655933.html

练习springboot1 项目 模拟高并发秒杀，实现基本的登录、查看商品列表、秒杀、下单等功能，简单实现了系统缓存、降级和限流

html常规学习.zip资源资料用户手册

ASP+ACCESS论坛的设计与实现(论文+源代码+开题报告)（源代码+论文+说明文档）.zip

HTML转PDF py脚本

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

练习springboot1 项目模拟高并发秒杀，实现基本的登录、查看商品列表、秒杀、下单等功能，简单实现了系统缓存、降级和限流

c语言从链式队列中获取头部元素并返回其状态的函数怎么写