ajax测试报错Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Co

本文详细解释了跨域策略导致的访问错误,特别是在本地不同端口间的资源请求受阻情况。提供了通过使用Koa框架的cors中间件来解决跨域问题的方法。

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

报错全文:Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

报错原因:本地不同端口也属于不同的域,因此需要跨域

实现跨域:通过script的src属性,或通过信任的服务器代理请求
 

可如图安装koa解决跨域问题

之后引入即可:

const cors = require("@koa/cors");

app.use(cors())

### 解决CORS策略阻止XMLHttpRequest请求的问题 当遇到 `No Access-Control-Allow-Origin` 错误时,这表明服务器未正确配置以处理跨域资源共享(CORS)请求。以下是解决问题的方法: #### 1. **理解预检请求 (Preflight Request)** 浏览器在发送某些复杂请求之前会先发起一个OPTIONS请求作为预检请求,询问服务器是否允许实际的请求[^3]。如果服务器未正确响应此预检请求,则后续的实际请求无法完成。 #### 2. **服务器端配置** 为了使CORS正常工作,服务器需要正确设置以下HTTP响应头: - **Access-Control-Allow-Origin**: 指定哪些来源可以访问资源。例如,`Access-Control-Allow-Origin: https://example.com` 表示仅允许来自 `https://example.com` 的请求[^1]。 - **Access-Control-Allow-Methods**: 列出允许的HTTP方法。例如,`Access-Control-Allow-Methods: GET, POST, PUT, DELETE`。 - **Access-Control-Allow-Headers**: 如果客户端在请求中自定义了头部字段,则服务器需在此处声明允许的额外头部字段。例如,`Access-Control-Allow-Headers: Content-Type, Authorization`[^1]。 - **Access-Control-Max-Age**: 可选,指定预检请求的结果能够被缓存的时间长度(秒数)。例如,`Access-Control-Max-Age: 86400` 表示结果可缓存一天[^1]。 #### 3. **客户端调整** 确保客户端发出的请求符合CORS标准。例如,在使用JavaScript发起Ajax请求时,可以通过设置 `withCredentials` 属性来控制是否携带凭证信息(如Cookie或Authorization Header)[^4]。 ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data'); xhr.withCredentials = true; xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ key: 'value' })); ``` #### 4. **调试建议** - 使用开发者工具查看网络请求详情,确认是否有预检请求失败的情况以及具体原因。 - 确认服务器返回的响应头是否包含了必要的CORS相关字段。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值