我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目

既然谈到axios,这里贴出axios的官方文档地址:

http://www.axios-js.com/zh-cn/docs/

首先是前端部分进行设置

第一步,在vue项目中安装axios

在vs code的终端中输入命令 npm install axios

稍等片刻,即可完成安装

第二步,构建axios的测试api

首先需要在main.js中,引入前面安装的axios

然后在某个组件的钩子函数里,写入以下代码

在组件被创建的时候,向后台发送get请求,获取数据。如果对axios的api不太熟悉的话,可以转到axios的官方文档

当然我也为新手提前准备好了截图,供查阅

上面这张图片来自于axios的官方文档

前端部分就此完成

接下来是配置.net core webapi项目

其实后端的配置极其简单,只需启用cors,然后做一些服务注入和中间件的添加即可

在微软的文档中也有对这部分给出了相关的注解,这里可以选择查阅微软的官方文档

第一步,服务注入

在startup.cs中加入以下代码

readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

#region cors
services.AddCors(options =>
{
options.AddPolicy(MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://localhost:8888")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
#endregion

注意WithOrigins方法表示的允许跨域访问的url,参数可以是一个数组的形式,比如像下面这种方式去写:

第二步,添加中间件

这里按照微软的官方文档,cors的中间件放置需要特别注意位置,这里面我是放在了UseRouting与UseEndPoints的中间,这个可以参照微软的文档,里面有注解

第三步,在控制器上打上标签

[EnableCors(PolicyName = "_myAllowSpecificOrigins")]

到此,前后端的配置都已结束,接下来让我们见证最终的效果

完美响应,so good

.net core3.1 webapi + vue.js + axios实现跨域的更多相关文章

  1. vue.js axios实现跨域http请求接口

    跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android. import axios from 'axios'; import qs from 'qs'; axios.post(' ...

  2. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  3. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

  4. 4.vue引入axios同源跨域

    前言: 跨域方案有很多种,既然我们用到了Vue,那么就使用vue提供的跨域方案. 解决方案: 1.修改HttpRequestUtil.js import axios from 'axios' expo ...

  5. vue 使用axios 出现跨域请求的两种解决方法

    最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案. 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); h ...

  6. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

  7. Springboot html vue.js 前后分离 跨域 Activiti6 工作流 集成代码生成器 shiro 权限

    官网:www.fhadmin.org 特别注意: Springboot 工作流  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...

  8. 记录:使用springboot的cors和vue的axios进行跨域

    一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bea ...

  9. vue.js vue-jsonp解决跨域问题

    安装jsonp npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组 ...

随机推荐

  1. TCP/IP||Ping

    1.what's PING 由Mike Muuss编写,为了测试另一台主机是否可达,发送一份ICMP回显请求报文给主机,并等待返回ICMP回显应答,如果不能PING到某台主机,那么就不能Telnet或 ...

  2. 安装ATS(apache traffic server)正向代理

    一 traffic server简介 Traffic Server是一种高性能Web代理缓存,可通过在网络边缘缓存频繁访问的信息来提高网络效率和性能.这使内容在物理上更接近最终用户,同时实现更快的交付 ...

  3. DEVOPS技术实践_05:sonar静态代码扫描

    一.SonarQube静态代码扫描平台 1.1 安装 https://www.sonarqube.org/官网 1.2 下载软件包 https://www.sonarqube.org/download ...

  4. requests + bs4 爬取豌豆荚所有应用的信息

    1.分析豌豆荚的接口的规律 - 获取所有app的接口url 2.往每一个接口发送请求,获取json数据 解析并提取想要的数据 app_data: 1.图标 app_img_url 2.名字 app_n ...

  5. Prometheus + Grafana 部署说明之「安装」

    说明 在前面的Prometheus学习系列文章里,大致介绍说明了Prometheus和Grafana的一些使用,现在开始介绍如何从头开始部署Prometheus+Grafana,来监控各个相关的指标数 ...

  6. 【题解】P4503 [CTSC2014]企鹅QQ(哈希)

    [题解]P4503 [CTSC2014]企鹅QQ(哈希) 考虑这样一种做法,将每个字符串的删去某个字符的新字符串的哈希值存下来,然后最后\(sort\)一遍双指针统计每个值相同的数的个数\(x\),这 ...

  7. 三分钟学会使用Docker部署.NET Core

    大概快有一年的时间没有碰过docker了,理由很简单,基本上都是在IIS上部署,看到很多大佬都开始Devops持续化集成了,但相对来说成本会更高,但对于大型团队来说还是不错的,这不?不想被大伙甩下,哈 ...

  8. C语言关键字const作用及其应用

    只要学过C语言的,都有知道const这个关键字,知道是用来定义常量的,如果一个变量被const修饰,那么它的值就不能再被改变,那么还有什么其他作用呢? 一.const常用作用 1.修饰局部变量 con ...

  9. 【原理】从零编写ILI9341驱动全过程(基于Arduino)

    最近在淘宝入手了一块ILI9341彩色屏幕,支持320x240分辨率.之前一直很好奇这类单片机驱动的彩色屏幕的原理,就打算自己写一个驱动,从电流层面操控ILI9341屏幕.话不多说,我们开始吧( ̄▽ ̄ ...

  10. vue将接口返回的日期实时转换为几分钟前、几小时前、几天前

    项目开发中,各种需求都会遇到,有些需求很合理,也好实现,有些需求不能说不合理,就是太麻烦,就比如类似标题所描述这种的需求,你不能说它是不合理的需求,因为很多论坛或微博.朋友圈.QQ空间之类的这种效果还 ...