Vue3+.NET6实战 鲜花网电商项目
发布时间
阅读量：
阅读量
一.axios的使用，读取JSON数据
-
安装命令：npm install axios --save
-
src目录下新建http文件夹，新建index.ts文件
- 在需要使用的组件里导入http中的方法即可
- 给轮播图绑定JSON数据
二.后端开发之webapi的新建-运行-以及目录讲解
-
使用vs2022创建webapi
-
选择.NET6.0
-
选择使用控制器创建
-
选择OpenApl
5.创建目录
三.webapi路由的设置，以及使用swagger查看和调试接口
- 新建Image控制器
- 修改默认路由
- 添加获取图片列表方法
ImageUrl="里面添加图片的地址",CourseUrl="里面添加页面跳转的地址"
- 使用Swagger查看和调试
通过添加断点来进行调试
然后在前台运行
然后出现这个画面
然后逐过程进行测试
三.axios读取webapi跨域问题分析
所观察到的现象是：在查看 Swagger API 文档或直接访问 webAPI 接口时能够正常获取数据返回结果；然而，在使用 axios 时会出现错误提示
- 原因：出现上边这一现象的原因是浏览器对于javascript
四.跨域问题的解决
- 后端解决跨域问题（解决方案后端设置接口允许跨域）
在Program.cs（主函数）中添加代码
//添加跨域策略
builder.Services.AddCors(options =>
{
configurations.AddConfiguration("corsConfig", config => config.EnableAllOrigins().EnableAllHeaders().ExposeHeaders("x-pagination"))
});
//使用跨域策略
app.UseCors("CorsPolicy");
- 前端解决跨域问题
前端通过设置一个代理来和后端的端口保持一致
在vue.config.js文件下加入下面的代码
然后重启前端的项目就可以了
全部评论 (0)
还没有任何评论哟~