Axios访问XMLHttpRequest错误-没有从原点调用.net webAPi

Question

我试图通过next axios向Localhost API发出一个简单的请求，但是，无论我在下一个配置文件中尝试做什么，它总是给出此错误:

访问XMLHttpRequest'https://localhost:44309/api/api/usuarios/login'来自origin"http://localhost:3000"已被CORS政策屏蔽飞行前请求未通过访问控制检查:否"访问-控制-允许-起源"标头出现在请求上资源。

我的请求是这样的:

const data= await this.$axios.$post(
'https://localhost:44309/api/usuarios/login',
loginObject
)

这是我的next .config.js:

publicRuntimeConfig: {
axios: {
baseURL: 'https://localhost:44309/api'
}
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true,
baseUrl: 'https://localhost:44309/api',
proxyHeaders: false,
credentials: false
},
proxy: {
'/api/': { target: 'https://localhost:44309/api', pathRewrite: { '^/api/': '' }, changeOrigin: true }
}

正如你所看到的，我已经尝试了n种方法，但都没有成功，我再也不明白了。在我的。net webApi服务器上，我已经在配置中添加了services.Cors()，没有任何作用。

Answer 1

这是一个CORS问题，所以它应该在后端修复，而不是前端。

你的下一个应用程序是客户端在这里做一个POST请求。这种事情可能会通过代理(相当丑陋的解决方案)被黑客攻击，但如果你可以访问后端，在那里添加CORS头(主要是你的开发和生产IP白名单)，你应该很好。

关于这到底是什么(本质上是安全)的更多细节，谷歌将有很多关于这方面的内容。

Answer 2

如果有人和我经历了同样的事情，要知道发生的事情很有可能是Cors，就像上面提到的那位朋友。

你必须在Configuration方法(Startup.cs)中创建一个Cors，并在Configure方法中使用Cors。此外，UseCors需要位于app.UseRouting和app.UseEndpoints的中间(这就是我的问题所在，基本上)。

下面是如何实现基本的Cors:

public void ConfigureServices(IServiceCollection services)
{
services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.AllowAnyHeader();
}));
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
app.UseCors("MyPolicy");
app.UseEndpoints(endpoints);
}