.net core5 webapi + vue + axios 搭建一个跨域访问的例子

这里我以自己创建一个个人信息的model为例，在前端使用table来展示人员信息。

后端：

首先创建一个.netcore的项目(我目前版本是.netcore5)，在解决方案中(Controllers同级)添加一个Models的文件夹用来存放人员信息的类。

public class EmployeeInfo
{
    public int EmployeeNo { get; set; }
    public string EmployeeName { get; set; }
    public int Age { get; set; }
    public int Sex { get; set; }
    public string Position { get; set; }
    public bool IsActive { get; set; } = false;
    public DateTime CreateDate { get; set; } = DateTime.Now;
}

在控制器Controllers中创建一个EmployeeInfoController的包含读写操作API控制器。

加入人员信息：

private List<EmployeeInfo> employeeInfos = new List<EmployeeInfo>
{
    new EmployeeInfo{
        EmployeeNo = 1,
        EmployeeName = "Jack",
        Age = 21,
        Sex = 1,
        Position = "Front-end Development",
    },
    new EmployeeInfo{
        EmployeeNo = 2,
        EmployeeName = "Tom",
        Age = 23,
        Sex = 0,
        Position = "Front-end Development",
    },
    new EmployeeInfo{
        EmployeeNo = 3,
        EmployeeName = "Martin",
        Age = 22,
        Sex = 1,
        Position = ".Net Development",
    },
};

修改获取数据(Get)的方法：

[HttpGet]
public IEnumerable<EmployeeInfo> Get()
{
    return employeeInfos;
}

允许跨域的配置：

找到Startup.cs这个文件，这里我在外面定义一个变量来存。

readonly string AllowRequestOrigins = "_allowRequestOrigins";

然后找到ConfigureServices这个方法，添加一个允许访问的域

services.AddCors(options =>
{
    options.AddPolicy(AllowRequestOrigins, builder =>
    {
        //允许访问该api的域
        builder.WithOrigins("http://localhost:8080").AllowAnyHeader().AllowAnyMethod();
     });
});

最后在Configure配置中使用这个允许跨域的变量，记得加在app.UseRouting();和app.UseEndpoints()之间。

app.UseCors(AllowRequestOrigins);

以上后端配置都已经完成，接下来允许项目看看是否能够正确生成数据。

可以看到我的api接口为http://localhost:61475/api/EmployeeInfo，数据都能正常显示，那么接下来我在前端使用axios来访问这个接口。看是否能够正确请求到这个接口。

前端：

ui部分

<template>
    <el-row>
        <el-col>
            <el-table :data="datalist">
                <el-table-column prop="employeeNo" label="Employee No"></el-table-column>
                <el-table-column prop="employeeName" label="Employee Name"></el-table-column>
                <el-table-column prop="age" label="Age"></el-table-column>
                <el-table-column prop="sex" label="Sex"></el-table-column>
                <el-table-column prop="position" label="Position"></el-table-column>
                <el-table-column prop="createDate" label="Create Date"></el-table-column>
                <el-table-column prop="isActive" label="Is Active"></el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

JS部分

export default {
  data() {
    return {
      datalist: [],
    };
  },

  mounted() {
    let _self = this;
    _self
      .$axios({
        method: "get",
        url: "http://localhost:61475/api/EmployeeInfo",
      })
      .then((response) => {
        let data = response.data;
        for (let item of data) {
          item.sex = item.sex === 1 ? "man" : "woman";
          item.isActive = item.isActive ? "yes" : "no";
          item.createDate = new Date(item.createDate).toLocaleDateString();
        }
        _self.datalist = data;
      });
  },
};

运行后的效果可以看到数据都能正常显示