ZBLOG

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.

遇到这个错误通常意味着后端服务器没有正确设置 CORS(跨源资源共享)相关的响应头。以下是解决方法的一些步骤和注意事项:

1. 检查后端服务

首先确认你的后端 API 服务是否已配置 CORS 响应头。根据你使用的后端技术,具体配置会有所不同。下面是一些常见语言/框架的示例:

Node.js (Express)

如果你在使用 Express 框架,可以使用 cors 中间件来简化配置:

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors()); // 允许所有来源

// 或者自定义 CORS 配置
app.use(cors({
    origin: 'http://your-frontend-domain.com', // 替换为前端域名
    credentials: true, // 如果需要支持 cookies
}));

app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello World' });
});

app.listen(5000);

Flask (Python)

对于 Flask,你可以这样做:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://your-frontend-domain.com"}})

@app.route('/api/data')
def data():
    return {"message": "Hello World"}

if __name__ == '__main__':
    app.run(port=5000)

2. 确保 Nginx 配置正确

如果你的 API 请求通过 Nginx 转发,请确保 Nginx 的配置添加了必要的 CORS 头部,如之前提到的。以下是一个示例:

location /api/ {
    proxy_pass http://localhost:5000; # 后端服务地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # 添加 CORS 响应头部
    add_header 'Access-Control-Allow-Origin' '*'; # 或者指定特定的源,例如 http://your-frontend-domain.com 
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept';

    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Max-Age' 86400; # 缓存时间(秒)
        return 204;
    }
}

3. 检查请求路径和方法

确保请求路径和方法正确,且实际发送的请求符合后端所支持的方法和路径。

4. 清除浏览器缓存或使用无痕模式

有时候,浏览器可能缓存了旧的请求结果,导致出现这种问题。尝试清除缓存或使用无痕浏览模式进行测试。

5. 调试和查看响应头

使用开发者工具检查网络请求。在“网络”标签中查看预检请求(OPTIONS)的响应,看是否返回了预期的 CORS 响应头。

完成这些步骤后,你应该能够解决由于缺少 'Access-Control-Allow-Origin' 响应头而导致的问题。如果问题依然存在,请仔细检查每个环节并确保所有设置都生效。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19049

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?