CORS 策略已阻止从 *** 从源 *** 获取访问权限：无“访问控制允许源”

Question

我有错误

从来源“882541222744288: //localhost:5000/admin/authenticate ”获取访问权限“ http://localhost:3000 ”已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”header 出现在请求的资源。 如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我的 API 管理器

function login(username, password) {
    const requestOptions = {
        method: 'POST',
        headers: {    
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*' },
        body: JSON.stringify({ username, password })};

    return fetch(`http://localhost:5000/admin/authenticate`, requestOptions)
        .then(handleResponse)
        .then(user => {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('user', JSON.stringify(user));
            return user;
        }
    );
}

在后端 Asp.Net Core 2.2 (Startup.cs) 中，我写道：

services.AddCors(options =>
{
    options.AddPolicy(
        _corsName,
        builder => { builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials(); });}
);

Answer 1

我尝试了 anerco 的答案，但它对我不起作用，我找到了这篇文章，它有一个非常相似的解决方案，但添加了.SetIsOriginAllowed(origin => true)并删除了.AllowAnyOrigin() 。

因此，您应该将此代码添加到启动类中的 Configure 方法中：

app.UseCors(x => x
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .SetIsOriginAllowed(origin => true) // allow any origin
                    .AllowCredentials()); // allow credentials

我建议阅读这篇文章以更好地理解所有这些，它非常简短且直截了当。

Answer 2

尝试这个：

on Startup.cs => Confirgure add:
     app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials());

Answer 3

嗨，我是这个话题的新手，但是因为上周我遇到了这个错误，所以我尝试启用选项方法并且第一部分已解决。 这个错误是由于政策和安全问题而发生的，但现在我建议您获取状态代码，在我的情况下是 405 错误，这意味着现在我们必须更改请求中的标头以允许所有方法和来源（不可能）但是这对我没有帮助。

所以我发现我在我的应用程序中为我的 API 启用了 cookie 加密和会话（广泛的点），因此我禁用了它们并清除了浏览器 cookie。

所以尝试使用这些：

1. 清除您的 cookie 并通过 Mod Header 扩展添加Access-Control-Allow-Origin': '*'并再次尝试检查修复。 mod header -您的标题（客户端）

2. 尝试使用中间界面来控制您的请求并引导他们进入特殊规则

    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      next();
    });

根据本网站： https : //medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

Answer 4

如果您的服务器基于 express.js，请将这些行添加到服务器：

app.use(function (req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
})

Answer 5

FOR NODE EXPRESS GRAPHQL RESTAPI添加此标头中间件以避免 CORS 和任何 POST 或 OPTIONS 错误

app.use((req, res, next) => {
      res.setHeader("Access-Control-Allow-Origin", "*");
      res.setHeader(
        "Access-Control-Allow-Methods",
        "OPTIONS, GET, POST, PUT, PATCH, DELETE"
      );
      res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
      if (req.method === "OPTIONS") {
        return res.sendStatus(200);
      }
      next();
    });

Answer 6

In my case, I was trying to make a blob from an image stored on the API (the server) so the URL was pointing to that resource, in that API's program.cs class, I already had a CORS policy, but I'd如您所说，得到确切的错误。 在我阅读有关此问题的Microsoft 文档（阅读您看到的第一段）之后，据说如果您想访问服务器上的资源，请使用 JavaScript （这是我试图做的），那么您必须调用app.UseCors(); 在 app.UseStaticFiles app.UseStaticFiles();之前这通常是相反的。

我的program.cs ：

const string corsPolicyName = "ApiCORS";

builder.Services.AddCors(options =>
{
    options.AddPolicy(corsPolicyName, policy =>
    {
        policy.WithOrigins("https://localhost:7212");
    });
});

...

var app = builder.Build();

app.UseSwagger();

app.UseSwaggerUI(settings =>
{
    settings.DisplayRequestDuration();
    settings.EnableTryItOutByDefault();
});

app.UseHttpsRedirection();

app.UseCors(corsPolicyName); // 👈 This should be above the UseStaticFiles();

app.UseStaticFiles(); // 👈 Below the UseCors();

app.UseAuthentication();

app.UseAuthorization();

app.UseApiCustomExceptionHandler();

app.MapControllers();

app.Run();

Answer 7

我最近回答了这个确切的问题，并获得了最佳答案。 这是问题链接，答案提供了详细说明以及如何在从服务或 URL 获取数据时使用该解决方案。

我知道当我在 localhost 上运行所有内容时我的代码有效但是当我尝试部署到 heroku 时我遇到了问题

Answer 8

Chrome 中存在一个影响用户多年的错误，可以在此处找到。

您可以使用 Chrome 扩展 Allow-Control-Allow-Origin：* 在这里找到： https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi : https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

或者，您可以使用http://lacolhost.com/指向 127.0.0.1 就像 localhost。