.net core3.1 webapi + vue.js + axios实现跨域

我所要讲述的是,基于.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

原文地址:https://www.cnblogs.com/shapman/p/12232868.html

时间: 2024-10-11 14:12:16

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

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

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

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

一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bean public CorsFilter corsFilter() { // 初始化cors配置对象 CorsConfiguration corsConfiguration = new CorsConfiguration(); // 允许跨域的域名,如果要携带cookie,不能写*,*代表所有域名都可

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

安装jsonp npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组件中基本用法 this.$jsonp('/company/Info',{id:233,name:'zhangsan'}).then(json => { // 返回数据 json, 返回的数据就是json格式 }).catch(err => { console.log(err) }) 原文地址:ht

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

js中各种跨域问题实战小结(二)

这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.window.name跨域实现 利用iframe和location.hash实现跨域 想必有很多人像我之前一样,或许只知道上面文中所说的那几种方法.所以,我刚了解到可以用iframe和location.hash来实现跨域的时候,我会想,为什么他们可以实现.iframe是什么,有什么特性,location.hash是什么

解决js获取数据跨域问题,jsonP

网上说了一些jsonp的示例,感觉都没用,最后研究了一下,调用腾讯的一个api.最后要加output=jsonp&callback=?这个,比较适用. var url = "http://apis.map.qq.com/ws/place/v1/search?boundary=nearby(39.908491,116.374328,1000)&keyword=%E6%88%90%E9%83%BD&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

【JS】AJAX跨域-被调用方与调用方解决方案(二)

解决跨域问题 跨域问题说明,参考[JS]AJAX跨域-JSONP解决方案(一) 实例,使用上一章([JS]AJAX跨域-JSONP解决方案(一))的实例 解决方案三(被调用方支持跨域) 被调用方解决,基于支持跨域的解决思路,基于Http协议关于跨域的相关规定,在响应头里增加指定的字段告诉浏览器,允许调用 跨域请求是直接从浏览器发送到被调用方,被调用方在响应头里增加相关信息,返回到页面,页面能正常获取请求内容. 1.服务端增加一个过滤器(CrossFilter.java),过滤所有请求,在请求响应

Jsonp的js实现,跨域请求,同源策略机制

Jsonp的js实现,跨域请求,同源策略机制1.跨域请求:请求URL的协议,域名,端口三者之间任意一个与当前页面地址不同即为跨域 存在跨域的情况: 网络协议不同,端口不通,域名不同,子域名不同,域名和域名对应IP不同2.同源策略机制:(相对情况,保护隐私不被泄露) 同源策略概念(Same-Origin Policy) 同源指:域名,协议,端口相同.不同源的客户端脚本(Javascript,ActionScript)在 没明确授权的情况下,不能读写对方的资源.3.Jsonp的js实现: Jsonp

vue.js axios使用

1. 自定义配置 /** * Created by superman on 17/2/16. * http配置 */ import axios from 'axios' import utils from '@/config/cookieUtils' // axios 配置 axios.defaults.baseURL = store.state.gateway_url axios.defaults.headers.post['Content-Type'] = 'application/json