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

文章介绍了如何解决.NETCore后端与Vue前端之间的跨域问题。通过在.NETCore的Startup.cs文件中配置CORS策略,允许指定的Vue应用源进行访问,并在Vue项目中使用VueCLI的devServer配置代理,转发请求至.NETCore应用,从而在开发环境中实现跨域请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

  1. 在后端(.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()方法。

  2. Configure方法中启用CORS中间件: 继续在Startup.cs文件中的Configure方法中添加以下代码:

    app.UseCors("AllowVueApp");

    这将在请求管道中启用CORS中间件,确保跨域请求被正确处理。

  3. 在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配置和安全考虑。

当浏览器出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误时,这是由于浏览器的同源策略所致,即浏览器限制了跨域请求。为了解决这个问题,您可以在服务端添加一个响应头来允许跨域请求。 如果您使用的是Node.js,可以在服务端代码中添加以下代码来设置响应头: ```javascript res.set("Access-Control-Allow-Origin", "*"); ``` 这将允许所有的域名都可以进行跨域请求。如果您只想允许特定的域名进行跨域请求,可以将"*"替换为您想要允许的域名。 另外,需要注意的是,添加响应头后需要重新启动服务端,以使更改生效。 这样,当前端发送请求时,就不会再出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 的错误了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [解决浏览器跨域问题 “has been blocked by CORS policy: NoAccess-Control-Allow-Originheader is ...](https://blog.csdn.net/m0_50671318/article/details/119821838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值