asp.net mvc webApi设置跨域请求

前端: 基于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...
        }
        
  1. 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();
            }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

急景流年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值