mvc使用axios访问webapi

解决跨域问题

1.webapi安装cors

2.WebApiConfig下添加

  public static void Register(HttpConfiguration config)
        {
            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
            // Web API 配置和服务

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
            config.Routes.MapHttpRoute(
               name: "MyApi",
               routeTemplate: "Myapi/{controller}/{action}/{id}",
               defaults: new { id = RouteParameter.Optional }
           );
        }

3.mvc下安装axios

添加

<script src="~/Scripts/axios.min.js"></script>

代码：

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View</title>
<script src="~/Scripts/vue.min.js"></script>
<link rel="stylesheet" href="~/Content/ElementUI/element-ui.css" />
<script src="~/Scripts/ElementUI/element-ui.js"></script>
<script src="~/Scripts/axios.min.js"></script>
</head>
<body>
<div id="app">
<el-button type="primary" v-on:click="getvalue(1234567)">主要按钮</el-button>
</div>
<script>
var myvue = new Vue(
{
el: "#app",
data: {
msg: "***",
msg2: null

},
methods:
{
getvalue: function (res)
{
axios.get('http://localhost:8081/Myapi/MyTest/getValue', {
params: {
id: res
}
})
.then(ret => {
alert(ret.data);
})
}
}
})
</script>
</body>
</html>