.Net Core API 和 PHP/JS 客户端应用程序（Syncfusion 字处理器）的 Cors 请求失败

Question

对于我的 PHP 应用程序，我需要使用 Syncfusion Javascript Word Processor。为了使用默认文本对其进行实例化，Syncfusion 要求将此文本格式化为 SFDT，一种 JSON。

//SFDT Example
"sections": [
    {
        "blocks": [
            {
                "inlines": [
                    {
                        "characterFormat": {
                            "bold": true,
                            "italic": true
                         },
                         "text": "Hello World"
                     }
                 ]
             }
         ],
         "headersFooters": {
         }
     }
 ]

此代码显示：Link

使用 .NET Core 包Syncfusion.EJ2.WordEditor.AspNet.Core，我可以将 doc(x) 文件转换为 sfdt 格式。因此，我使用 Visual Studio 2017 For Mac 和这个包创建了一个新的 .NET Core Web Api 应用程序。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.DocumentEditor;

namespace SyncfusionConverter.Controllers
{
    [Route("api/[controller]")]
    public class SyncfusionController : Controller
    {

        [AcceptVerbs("Post")]
        public string Import(IFormCollection data)
        {
            if (data.Files.Count == 0)
                return null;
            Stream stream = new MemoryStream();
            IFormFile file = data.Files[0];
            int index = file.FileName.LastIndexOf('.');
            string type = index > -1 && index < file.FileName.Length - 1 ?
            file.FileName.Substring(index) : ".docx";
            file.CopyTo(stream);
            stream.Position = 0;

            WordDocument document = WordDocument.Load(stream, GetFormatType(type.ToLower()));
            string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(document);
            document.Dispose();
            return sfdt;
        }

        internal static FormatType GetFormatType(string format)
        {
            if (string.IsNullOrEmpty(format))
                throw new NotSupportedException("EJ2 DocumentEditor does not support this file format.");
            switch (format.ToLower())
            {
                case ".dotx":
                case ".docx":
                case ".docm":
                case ".dotm":
                    return FormatType.Docx;
                case ".dot":
                case ".doc":
                    return FormatType.Doc;
                case ".rtf":
                    return FormatType.Rtf;
                case ".txt":
                    return FormatType.Txt;
                case ".xml":
                    return FormatType.WordML;
                default:
                    throw new NotSupportedException("EJ2 DocumentEditor does not support this file format.");
            }
        }
    }
}

我发出 Ajax 请求，以我的 doc(x) 文件作为参数调用此 .Net 方法。

function loadFile(file) {
    const ajax = new XMLHttpRequest();
    const url = 'https://localhost:5001/api/Syncfusion/Import';
    ajax.open('POST', url, true);
    ajax.onreadystatechange = () => {
        if (ajax.readyState === 4) {
            if (ajax.status === 200 || ajax.status === 304) {
                // open SFDT text in document editor
                alert(ajax.status);                                                          
             }else{
                 alert(ajax.status);
             }
         }else{
              alert(ajax.readyState);
         }
     };
     let formData = new FormData();
     formData.append('files', file);
     ajax.send(formData);
}

执行 loadFile 函数时，我在浏览器的控制台中收到此错误：“跨域请求（阻止多源请求）：“同源”策略不允许查询位于 @987654324 上的远程资源@. 原因：CORS 请求失败。”

我关注 this tutorial 和那些 SO 帖子 Link1 Link2 但它不起作用。有什么想法可以解决这个问题吗？

编辑 1：我的代码似乎可以在 Safari 和 Chrome 上运行，但不能在 Firefox 上运行。

编辑 2：Startup.cs

namespace SyncfusionConverter
{
public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(setup => setup.AddPolicy("CorsPolicy", builder =>
        {
            builder.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
        }));
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseCors("CorsPolicy");
        app.UseHttpsRedirection();
        app.UseMvc();
    }
}
}

Answer 1

您的代码看起来不错。我的猜测是，Firefox 与您的 asp.net 核心应用程序的自签名开发证书存在问题。我们过去曾多次遇到这种情况，Firefox 错误消息总是有点误导。

我们为“修复”它所做的是：

1. 在Firefox中打开https://localhost:5001
2. 您现在应该会在 Firefox 中看到证书错误
3. “信任”自签名证书/为其添加例外
4. 再次尝试您的 api 调用。它现在应该可以工作了