vue+.netcore webapi前后端分离跨域请求配置

最新推荐文章于 2025-04-17 15:46:18 发布

Hello_JayJay

最新推荐文章于 2025-04-17 15:46:18 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Hello_JayJay/article/details/82966970

本文介绍了如何在Vue应用中利用axios进行HTTP请求，并详细讲解了.NET Core WebAPI的跨域配置方法，包括在startup.cs中的设置以及在接口上的注解，最后通过验证确保配置成功。

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

1.安装http库-axios（axios 是一个基于 promise 的 HTTP 库）：

npm install --save axios vue-axios    // npm安装

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = 'http://localhost:50538';// 配置接口地址

Vue.prototype.axios = axios;    // 改写vue的原型属性

2.axios使用：

在vue组件中：

methods: {
        getTitleInfos() {
            this.axios
                .get("/api/values")
                .then(res => {
                    console.log("res",res);
                })
                .catch(err=>{
                    console.log("err",err);
                })
        }
    },
created() {
    this.getTitleInfos();
},

前端配置完成。

3..netcore webapi配置

在startup.cs中更新配置：