.net core +vue 的前后端分离项目，把这个错误：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ head

最新推荐文章于 2023-11-21 10:08:11 发布

kuyz

最新推荐文章于 2023-11-21 10:08:11 发布

阅读量726

点赞数

文章标签： vue.js .netcore javascript

本文链接：https://blog.csdn.net/kuyz1/article/details/131186874

版权

这个错误是由于跨域资源共享（CORS）策略引起的。当浏览器在请求跨域资源时，会先发送一个预检请求（OPTIONS请求）给服务器，服务器需要在响应头中添加Access-Control-Allow-Origin字段来指定允许的源。

要解决这个问题，你可以按照以下步骤进行操作：

在后端（.NET Core）中配置CORS：在你的.NET Core项目中，找到Startup.cs文件，然后在ConfigureServices方法中添加以下代码：

services.AddCors(options => { options.AddPolicy("AllowVueApp", builder => { builder.WithOrigins("http://localhost:8080") // 替换成你的Vue应用的地址 .AllowAnyHeader() .AllowAnyMethod(); }); });

这里使用了WithOrigins方法来指定允许的源，你需要将http://localhost:8080替换为你实际的Vue应用地址。如果你想允许所有源，可以使用AllowAnyOrigin()方法。
在Configure方法中启用CORS中间件：继续在Startup.cs文件中的Configure方法中添加以下代码：

app.UseCors("AllowVueApp");

这将在请求管道中启用CORS中间件，确保跨域请求被正确处理。
在Vue应用中配置代理：如果你的Vue应用是通过Vue CLI开发的，可以在项目的根目录下找到vue.config.js文件，如果没有则创建该文件，并添加以下配置：

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:5000', // 替换成你的.NET Core应用地址 ws: true, changeOrigin: true } } } };

这里的target字段应该指向你的.NET Core应用的地址，这样在开发过程中，所有以/api开头的请求都会被代理到.NET Core应用上。

这样配置完成后，你的.NET Core应用就会允许来自Vue应用的跨域请求了，并且浏览器将不再报错。记得在生产环境中根据实际需要进行适当的CORS配置和安全考虑。

关注