.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;
      });
  },
};

運行后的效果可以看到數據都能正常顯示