从源“http://localhost:62521”访问“localhost:3000/users”的 XMLHttpRequest 已被 CORS 策略阻止

Posted 2023-03-04

【中文标题】从源“http://localhost:62521”访问“localhost:3000/users”的 XMLHttpRequest 已被 CORS 策略阻止

【英文标题】：Access to XMLHttpRequest at 'localhost:3000/users' from origin 'http://localhost:62521' has been blocked by CORS policy

【发布时间】：2021-12-18 10:44:50

【问题描述】：

即使我在我的代码中允许了 CORS，我仍然收到此错误。这个在 Node js 中：

app.use(cors());

app.get('/users', (req, res) => 
    res.set(
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': 'POST,GET,DELETE,PUT,OPTIONS'
    );

    User.find(, function(err, users)
        

        if(err)
        
            return res.status(500).send(err);
        
        return res.send(users);
    );
);

我只是尝试使用 Flutter 从 http://localhost:3000/users 发出 GET 请求：

import 'package:retrofit/http.dart' as head;

@head.RestApi(baseUrl: "http://localhost:3000")
abstract class ApiClient 
  factory ApiClient(Dio dio, String baseUrl) = _ApiClient;

  @head.GET("/users")
  Future<User> getUsers();

这个 GET 请求在 Postman 中工作得很好，但在 Flutter 中却因为 CORS 而无法工作。有人可以帮忙吗？

【问题讨论】：

错误应该告诉你你缺少什么标题。应该是-Origin结尾的那一个

我也尝试过@Evert，但无济于事。谢谢你的回答。

【参考方案1】：

您只允许 Headers 和 Method，尝试添加 Access-Control-Allow-Origin 并将其分配给 * 或网站 URL。

res.set(
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': 'POST,GET,DELETE,PUT,OPTIONS'
);

【讨论】：

感谢您的回答 Pyxl。我也尝试过添加，但无济于事。

您好，感谢您的标记，但由于我的回答没有解决您的问题，我建议您取消标记我的答案。

【参考方案2】：

您使用的是 Express 吗？ 试试这个：

const express = require("express");
const app = express();
...
const cors = require("cors");
...
const corsOptions = 
  origin: ['http://localhost:62521'],
  optionsSuccessStatus: 200, // some legacy browsers     (IE11, various SmartTVs) choke on 204
;
app.use(cors(corsOptions)); // CORS policy