解决asp.net mvc跨域问题

跨域浏览器会报错

 

 如何解决？

1、前端

 添加共用common.js

import axios from 'axios'
let querystring = require('querystring')
let token = '';
axios.defaults.baseURL = 'http://10.182.29.94:8154/fpcfcs/api'
axios.defaults.timeout = 600000//超时时长,单位毫秒
axios.defaults.withCredentials = false//携带cookie
axios.defaults.headers.common['Token'] = token;
//axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头 


export function GetBaseURL() {
    return axios.defaults.baseURL;
}

//添加一个请求拦截器
axios.interceptors.request.use(function (config) {
   // token = window.sessionStorage.getItem('Token');
   token = getCookie("Token");
    config.headers.common['Token'] = token;
    console.dir(config);
    return config;
  }, function (error) {
    // Do something with request error
    console.info("error: ");
    console.info(error);
    return Promise.reject(error);
  });

  // 添加一个响应拦截器
/* axios.interceptors.response.use(function (response) {
    console.log(response)
    if (response.data && response.data.Result) {
      if (response.data.Result=="1" ) {
        //未登录
       // response.data.Msg = "登录信息已失效，请重新登录";
       // alert(response.data.Msg);
        //routerIndex.push('/login'); 跳转登录页
      }
      if (parseInt(response.data.Result) === 0) {
        alert(response.data.Msg);
      }
    }
    return response;
  }, function (error) {
    //做一些响应错误的事情
    console.log(error);
    alert("服务器连接失败");
    return Promise.reject(error);
  }) */

//get请求
export function get(url, data = {}) {
    return axios.get(url, { params: data })
}
//post请求
export function post(url, data = {}) {
    return axios.post(url, querystring.stringify(data))
}
//post请求
export function postWithJson(url, data = {}) {
    return axios.post(url, data)
}
//post form参数请求
export function form(url, data = {}) {
    return axios.post(url,
        querystring.stringify(data),
        {
            headers: {
                'Content-Type': 'application/x-www-form-urlencode'
            }
        })
}
//下载文件
export function download(url, data = {}) {
    axios
        .post(url, data, { responseType: 'blob' })
        .then(function (response) {
            //服务器端要在header设置Access-Control-Expose-Headers：Content-Disposition
            //前端才能正常获取Content-Disposition内容
            const disposition = response.headers['content-disposition']
            let fileName = disposition.substring(disposition.indexOf("filename*=UTF-8") + 17, disposition.length);
            //iso8859-2的字符转换成中文
            fileName = decodeURI(escape(fileName));
            var blob = new Blob([response.data])
            var downloadElement = document.createElement('a');
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = fileName; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch(function (error) {
            alert("下载发送错误，错误信息：" + error)
        });
}

//时间戳转日期格式,格式为2014-06-18 10:33:24
export function timestampToTime(timestamp) {
    //var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var date = new Date(timestamp);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = date.getDate() + ' ';
    var h = date.getHours() + ':';
    var m = date.getMinutes() + ':';
    var s = date.getSeconds();
    return Y + M + D + h + m + s;
}
function getCookie(name) {
    /// <summary>获取Cookie</summary>
    /// <param name="name" type="string">Cookie的名称</param>
    /// <returns type="object" />

    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]); return null;
}

前端使用

import { post, download } from "../Scripts/Common";

 post("/BasicInfo/GetLeiBie").then((res) => {
        query.CATEGORYS = res.data.Data;
      });

 

 

2.修改asp.net mvc项目中web.config文件

 

在system.webServer节添加

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Headers" value="Content-Type,Accept,X-Requested-With,Token"/>
<add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS"/>
<add name="Access-Control-Allow-Origin" value="*"/>
</customHeaders>
</httpProtocol>