axios CORS的任何解决方案？

fdbelqdn 于 2023-10-18 发布在 iOS

关注(0)|答案(1)|浏览(153)

想用CORS解决一个问题我想我已经试过所有的方法...但都不管用
我用react + .net 6
.net应用程序中launchSettings.json中的配置文件部分

"profiles": {
    "FlightArrivalsStat.API": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "swagger",
      "applicationUrl": "https://localhost:5001;http://localhost:5144",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }

在programm.cs中，我添加了

builder.Services.AddCors(p => p.AddPolicy("corsapp", builder =>
{
    builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader();
}));

在react应用程序中，我尝试同时使用一种和所有方法：
使用craco：

devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000,
    headers: {
        "Access-Control-Allow-Origin": "*"
    },
    proxy: {
        '/api/**' :{
            target: 'http://localhost:5144',
            pathRewrite: { '^/api': '' },
            secure: false,
            changeOrigin: true,
        }
    }
}

将"proxy": "http://localhost:5144"添加到package.json
创建axios，如：

export default axios.create({

    baseURL: "http://localhost:5144/api",
    
    headers: {
        "Content-type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS"
    }
});

要求很简单：

await axios.get<ArrivalArray>('schedule', {params});

在浏览器控制台中，我在所有情况下都会收到以下消息：
访问位于“http：//localhost：5144/api/schedule？station=DME&date=2023-08-22T09：26：55.437Z&range=60' from origin ' http：//localhost：3000 ' has been blocked by CORS policy：对印前检查请求的响应未通过访问控制检查：预检请求不允许重定向。
同样的问题，https...在谷歌上搜索了大量的信息后，我能问一下，我做错了什么，错过了什么？

axios

来源：https://stackoverflow.com/questions/76952267/any-solution-for-cors

1条答案

按热度按时间

vom3gejh1#

同样的问题，https...在谷歌上搜索了大量的信息后，我能问一下，我做错了什么，错过了什么？
根据您的场景和配置，您的客户端配置似乎是正确的。除此之外，预检请求失败可能由几个原因引起，例如，如果请求URL包含任何尾随斜杠/，而不是您的电子邮件源或URL？假设你的目标是http://localhost:5144/login，但在你的请求中，它的传递方式就像http://localhost:5144/login/可以导致CORS一样。请仔细检查一下。
另一个重要的问题是，你的控制器怎么样？它有没有CORS属性在上面？例如[EnableCors（“您的CORS策略名称”）]，
此外，请在launchsettings.json文件中将以下属性设置为true，以便相应地响应预检请求。

"windowsAuthentication": true,
 "anonymousAuthentication": true,

后端CORS配置：

var MyAllowSpecificOrigins = "_corsapppolicy";
    builder.Services.AddCors(options =>
    {
        options.AddPolicy(name:MyAllowSpecificOrigins,
            builder =>
            {
                builder.WithOrigins("http://localhost:5144") //Should be your client side incoming request URL
                .WithMethods("PUT", "DELETE", "GET");// Include all http verb you want to allow
            });
    });

使用中间件参考：

app.UseCors("MyAllowSpecificOrigins")

设置控制器CORS属性：
您可以使用已创建的CORS策略属性启用控制器，如下所示：

[EnableCors("_corsapppolicy")]
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
{
    return new string[] { "Your value 1", "Your value 2" };
}

替代方式：

var corsAppPolicy = "_corsapppolicy";

builder.Services.AddCors(options =>
{
    options.AddPolicy(corsAppPolicy,
    builder =>
    {
        builder.SetIsOriginAllowed(isOriginAllowed: _ => true).AllowAnyHeader().AllowAnyMethod().AllowCredentials();
    });
});

注册中间件：

app.UseCors(corsAppPolicy);

**注意：**CORS中间件配置请参考此官方文档，同时检查CORS的控制器属性

赞(0）回复(0）举报 2023-10-18

我来回答

axios CORS的任何解决方案？

1条答案

相关问题

热门标签

最新问答