CORS请求使用.NET Core API和PHP/JS客户端应用程序(SyncFusion Word处理器)失败

Question

对于我的PHP应用程序，我需要使用SyncFusion JavaScript文字处理器。要使用默认文本实例化，Syncfusion要求在SFDT中格式化此文本，一种JSON。

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

此代码显示以下内容：链接

使用.NET核心软件包syncfusion.ej2.wordeditor.aspnet.core，我可以将doc（x）文件转换为sfdt格式。因此，我使用此软件包创建了一个带有Visual Studio 2017的新的.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请求，将此.NET方法与我的DOC（X）文件称为参数。

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函数时，我在浏览器的控制台中遇到了此错误：" Cross-Origin请求（阻止多孔请求）："相同的Origin"策略不允许咨询位于HTTPS上的远程资源：//localhost：5001/syncfusion/import。原因：CORS请求失败。"

我遵循本教程和这些帖子link1 link2，但它不起作用。解决这个问题有什么想法吗？

编辑1：看来我的代码在Safari上起作用＆amp;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. 打开https：//localhost：5001 in Firefox
2. 您现在应该在Firefox中看到证书错误
3. "信任"自签名证书/添加一个例外
4. 再次尝试您的API调用。它应该现在工作