前端: 基于Vue的Quasar前端框架,使用axios请求后端接口
axios的基本配置(axiosHelper.js):
import axios from 'axios'
import storage from './localstorage'
var bsaeUrl =process.env.NODE_ENV === 'production' ? '发布api的地址' : '调试的api地址';
/**
* 创建axios实例
*/
var instance = axios.create({ timeout: 10000});
instance.defaults.headers.post['Content-Type'] =
'application/x-www-from-urlencoded';
/**
* 拦截请求
*/
instance.interceptors.request.use(
function(config) {
config.url = bsaeUrl + config.url;
return config;
},
function(error) {
return Promise.reject(error);
}
);
/**
* 拦截响应
*/
instance.interceptors.response.use(
/**
* 请求成功
*/
(res) => {
var rpData = JSON.parse(res.request.responseText);
return rpData;
},
/**
* 请求失败
*/
(error) => {
const { response } = error;
if (response) {
errorHandle(response.status, response.data.Message);
return Promise.reject(response);
} else {
storage.setItem('errorMsg', '未连接');
}
}
)
export default instance
api请求(apiHelper.js):
import axios from "./axiosHelper";
const api = {
//api定义。。。
//--------------------登录
Login(param) {
return axios.post("Api/Account/Login", param);
},
}
export default api;
后端配置:
1.WebConfig:z哎system.webServer节点下添加如下代码:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
</customHeaders>
</httpProtocol>
2.api配置:
[HttpPost]
[Route("Api/Account/Login")]
[AllowAnonymous]
public ApiResponseMessage Login([FromBody]AccountLoginInfo loginInfo)
{
//To-Do...
}
- Global.asax配置:
回应OPTIONS请求: OPTIONS 方法发起一个预检请求,以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法;Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断,是否接受接下来的实际请求。
protected void Application_BeginRequest()
{
if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
Response.End();
}
}