CORS - 请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我想将数据从 Font-end 表单（用 REACT 编码）发布到 API 服务器（用 C# 编码）。

为此，我编写了以下代码：

对于前端：

const [analysis, setAnalysis] = useState(null);

const headers = {
    'Content-Type': 'application/json;charset=UTF-8',
    "Access-Control-Allow-Origin": "*",
    'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': '*'
};


useEffect(() => {
    axios.get(baseURL, {
        mode: 'cors',
        headers: headers,
    }).then((response) => {
        setAnalysis(response.analysis);
    });
}, []);

对于后端：

builder.Services.AddCors(options =>
{
    options.AddPolicy("MyMyAllowCredentialsPolicy",
        builder =>
        {
            builder.AllowAnyMethod()
                .AllowAnyHeader()
                .SetIsOriginAllowed(origin => true) // allow any origin
                .AllowCredentials(); // allow credentials
        }
    );
}); 

尽管如此，我有以下问题：

我尝试了很多不同的配置，但没有任何效果。有人知道问题是什么以及如何解决吗？

提前谢谢你，亚历克西娅

---

[版]

根据所有建议，我更改了代码。

前端部分：

const headers = {
        'Content-Type': 'application/json;charset=UTF-8',
    };


    useEffect(() => {
        axios.get(baseURL, {
            mode: 'cors',
            headers: headers,
        }).then((response) => {
            setAnalysis(response.analysis);
        });
    }, []);

后端：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddCors(options =>
{
    options.AddPolicy(MyAllowSpecificOrigins,
                          builder =>
                          {
                              builder.WithOrigins("http://localhost:3000/")
                                                  .AllowAnyHeader()
                                                  .AllowAnyMethod();
                          });
});

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();


var app = builder.Build();

app.UseCors(MyAllowSpecificOrigins);

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthorization();

app.MapControllers();

app.Run();

有了这个配置，我仍然有：

Access to XMLHttpRequest at 'https://localhost:7067/...?id=1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

我遇到了类似的问题，必须对实际的 API 代码进行更改，因此在 Start.cs 上添加以下内容。我建议首先在本地主机中尝试，然后在您实际拥有 API 的地方部署更改。

public class Startup
{
    private readonly string _MyCors = "MyCors";
    .
    .
    .
    public void ConfigureServices(...)
    {
        .
        .
        .
        //Under your services.AddControllers();
        services.AddCors(options =>
        {
            options.AddPolicy(name: _MyCors, builder =>
            {
                //for when you're running on localhost
                builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost") 
                .AllowAnyHeader().AllowAnyMethod();


                //builder.WithOrigins("url from where you're trying to do the requests")
            });
        });
    }
    public void Configure(.....)
    {
        //before the app.UseAuthorization & app.UseEndpoints
        app.UseCors(_MyCors);
    }
}