Access to XMLHttpRequest at 'http://localhost:10010/item' from origin 'http://localhost:9001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. (索引):236 Error: Network Error at e.exports (axios.min.js:8:4483) at l.onerror (axios.min.js:8:3323) axios.min.js:8 POST http://localhost:10010/item net::ERR_FAILED (匿名) @ axios.min.js:8 e.exports @ axios.min.js:8 e.exports @ axios.min.js:8 Promise.then(异步) r.request @ axios.min.js:8 r.<computed> @ axios.min.js:8 (匿名) @ axios.min.js:2 confirmEdit @ (索引):222 invoker @ vue.js:2029 Vue.$emit @ vue.js:2538 handleClick @ element.js:1 invoker @ vue.js:2029 fn._withTask.fn._withTask @ vue.js:1828

时间: 2024-02-23 17:56:20 浏览: 116

[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()` 易于理解和使用，尤其适合快速原型开发或对性能要求不高的项目。

这是一个跨域请求被拦截的错误。由于浏览器的同源策略限制，JavaScript 发起的跨域请求会被浏览器拦截，除非服务器设置了允许跨域请求的响应头。在这个错误信息中，服务器没有设置 Access-Control-Allow-Origin 响应头，导致浏览器拦截了该请求。解决这个问题的方法是在服务器端设置响应头 Access-Control-Allow-Origin，允许跨域请求的源。具体的方法可以参考跨域资源共享（CORS）相关的文档和教程。

阅读全文

相关推荐

XMLHttpRequest_test:XMLHttpRequest学习代码

ElementUI-Upload-qiniuyun:ElementUI的Upload上传到七牛云

origin 'http://localhost:9528' has been blocked by CORS policy

Access to XMLHttpRequest at 'http://localhost:8080/poi/list' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'http://localhost:8080/admin/login' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the

Access to XMLHttpRequest at 'http://localhost:3000/users/expressPickupLook' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'http://localhost:3000/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'http://localhost:9999/user/login' from origin 'http://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access contr

Access to XMLHttpRequest at 'http://127.0.0.1/test1/php/content.php' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'http://192.168.101.133:2023/user/selectCode/0' from origin 'http://localhost:8083' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

设置了之后，访问后端接口的时候还是报错Access to XMLHttpRequest at 'http://localhost:3000/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Access to XMLHttpRequest at 'http://wl-api.s1.m173.net/api/orders' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

Access to XMLHttpRequest at 'http://100.38.131.120:8080/nweb-service/nwebService/trade.action?action=sendTrade' from origin 'http://localhost:8083' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Access to XMLHttpRequest at 'http://192.168.4.39:8088/case/login' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 翻译

异常 AJAX 跨域请求报：No ‘Access-Control-Allow-Origin‘ header is present

gotch：浏览器的简单，优雅，轻量级的HTTP客户端

最新推荐

tables-3.6.1-cp39-cp39-win_amd64.whl

基于springboot大学生心理咨询平台源码数据库文档.zip

Javaweb仓库管理系统项目源码.zip

全国江河水系图层shp文件包下载

管理建模和仿真的文件

Keras模型压缩与优化：减小模型尺寸与提升推理速度

MTK 6229 BB芯片在手机中有哪些核心功能，OTG支持、Wi-Fi支持和RTC晶振是如何实现的？

点云二值化测试数据集的详细解读

"互动学习：行动中的多样性与论文攻读经历"

Keras正则化技术应用：L1_L2与Dropout的深入理解