Post上传文件出现跨域问题

Question

问题描述：我使用vue进行前端开发，后端用的ABP框架。
后端我已然设置了允许跨域，所有的GET请求确实也没有
问题，但是涉及到一个图片上传的问题，却报了跨域提示，
导致无法上传。
前端代码大概如下

  saveToImage({ dispatch }) {
    if (this.state.currentMapFileName === null) {
      Message.warning('Please upload the library map first')
      return
    }
    html2canvas(state.that.$refs.vueDomSaveToImage).then(res => {
      var imgUrl = res.toDataURL('image/png')
      var file = base64toFile(imgUrl, state.currentMapFileName)
      // 通过FormData将图片上传到服务器
      var formData = new FormData() 
      formData.append('file', file)
      UploadMapImageWithEquipment(formData, state.form.floor, state.form.libraryId, state.form.mapImageWidth, state.form.mapImageHeight).then(response => {
        if (response.result.isSuccess === false) {
          Message.warning(response.result.msg)
        } else {
          dispatch('getMapImage', 'true')
          state.open = false
          state.tableData = null
          Message.success('Successfully saved map with device location information!')
        }
      })
    })
  },

后端代码如下：

        /// <summary>
        /// 上传文件
        /// </summary>
        /// <returns></returns>
        [Consumes("multipart/form-data")]  //由于是文件流，所以这里指定的是multipart/form-data，而不是application/x-www-form-urlencoded 
        [HttpPost] //指定Post method
        public async Task<Result> UploadMapImageWithEquipment(string Floor, Guid LibraryID, int MapImageWidth, int MapImageHeight)
        {
            #region Api处理模块
            Result returnResult = new Result();
            returnResult.IsSuccess = true;
            returnResult.Msg = "success";
            try
            {
                //获取上传文件
                IFormFileCollection files = _httpContext.HttpContext.Request.Form.Files;
                //判断是否有文件上传
                if (files.Count == 0)
                {
                    returnResult.Msg = "No files to upload";
                    return returnResult;
                }
                try
                {
                    LibraryMap libraryMap = new LibraryMap();
                    /*下面是新增地图*/
                    IFormFile file = files[0];
                    EquipmentCodeEnum equipmentCodeEnum = new EquipmentCodeEnum();
                    using (Stream fileDataStream = file.OpenReadStream())
                    {
                        long fileLength = file.Length;
                        byte[] fileData = new byte[fileLength];
                        await fileDataStream.ReadAsync(fileData, 0, (int)fileLength);
                        //判断记录是否已经存在
                        var query = _libraryMapRepository.GetAll()
                                .Where(t => t.LibraryID == LibraryID && t.Floor == Floor);
                        List<LibraryMap> libraryMaps = query.ToList();
                        if (libraryMaps.Count > 0)
                        {
                            //地图替换
                            libraryMap = libraryMaps[0];
                            libraryMap.MapImageWithEquipment = fileData;
                            libraryMap.ContentType = file.ContentType;
                            libraryMap.UpdateTime = DateTime.Now;
                            libraryMap.MapImageWidth = MapImageWidth;
                            libraryMap.MapImageHeight = MapImageHeight;
                            await _libraryMapRepository.UpdateAsync(libraryMap);
                            return returnResult;
                        }
                    }
                }

问题提出：请教有什么解决方案可以解决这个问题呢? 期待

Answer 1

1. 如果你前端和后端最终部署是在一个域名下,请不要为了解决跨域而开启后端的跨域,这样会有风险
2. 请使用vue自带的工具,通过代理方式访问后端服务
   vue2代理设置
   
   vue2跨域解决方案：proxy代理 - 掘金 前端开发必备的一个技能点[ 如何解决接口跨域问题？]，在vue项目中，使用 proxy代理 可以轻松解决跨域问题。只需要在vue.config.js配置文件做几行代码配置，如下所示！ https://juejin.cn/post/7029337273767886862
   
   vue3代理设置
   
   https://www.cnblogs.com/deng-jie/p/12395742.html