JSPDF 在单击下载按钮时显示 CORS 策略错误

Posted 2023-03-04

【中文标题】JSPDF 在单击下载按钮时显示 CORS 策略错误

【英文标题】：JSPDF showing CORS policy error on clicking the download button

【发布时间】：2021-09-10 00:27:06

【问题描述】：

我是反应新手，也是 jspdf pdf 创建者的新手。单击下载时，我的 jspdf 文件中出现以下错误。

显示 cors 政策错误：

这是我生成 pdf 的函数：

generatePDF = () => 
    window.html2canvas = html2canvas;

    var doc = new jsPDF("p", "pt", "a4");

    doc.html(document.querySelector("#content"), 
      callback: function(pdf) 
        pdf.save("Coil_Details.pdf");
      
    );
  ;

这是我获取数据的函数：

getData = async () => 
    var ID = this.props.id;
    var promise = await this.getAuthorization();
    console.log("ID:" + ID);

    axios(
      method: "GET",
      url: serverDetails.jwtTokenGenerationURL,
      params: 
        "jwt-token": jwtService.GetJWT()
      
    )
      .then(response => 
        if (response.statusText != "" && response.statusText != "OK") 
          return Promise.reject(response.statusText);
         else 
          serverDetails.jwtResponse = response.data;

          //return response.data;
        
      )

      .then(response => 
        var url = "api/observation/GetCoilImages";
        url += "?jwt=" + serverDetails.jwtResponse;
        url += "&ID=" + ID;
        axiosAPI
          .get(url)

          .then(response => 
            if (response.statusText != "" && response.statusText == "OK") 
              // window.open(response.data, '_blank');

              console.log("Response:" + response.data);
              console.log("Response1:" + response.data[0]);
              var code = [];
              for (var i in response.data) 
                code[i] = response.data[i];
                console.log("Code:" + code);
              
              this.setState( code );
            

            this.setState(
              modal: !this.state.modal
            );
          );
      );
  ;

对应的C#方法是这样的：

[HttpGet]
        [Route("GetCoilImages")]
        public IHttpActionResult GetCoilImages(string jwt, string ID)
        

            List<string> coilURL = new List<string>();
            

            string connectionstring = Utilities.SQL_DB1;// our SQL DB connection
            SqlConnection conn1 = new SqlConnection(connectionstring);

            DataTable dt = new DataTable();

            string query = "Select CCD_IMAGE_URL from T_CQL_COIL_DESC where CCD_COIL_ID = '" + 
             ID + "'";

            //SqlConnection conn = new SqlConnection(connectionstring);
            SqlCommand cmd = new SqlCommand(query, conn1);
             conn1.Open();

            


            // create data adapter
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            // this will query your database and return the result to your datatable

            
            da.Fill(dt);

             if (dt.Rows.Count > 0)
            
            for (int i = 0; i < dt.Rows.Count; i++)
                
                    coilURL.Add(imgurl+dt.Rows[i]["CCD_IMAGE_URL"].ToString());
                
            




            conn1.Close();
            da.Dispose();
            return Ok(coilURL);


        

我还在 web.api.config 中处理了 cors 策略，如下所示：

namespace coilQuality

    public static class WebApiConfig
    
        public static void Register(HttpConfiguration config)
        
            // Web API configuration and services

            // Web API routes
            var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);
            

            var constraints = new  httpMethod = new HttpMethodConstraint(HttpMethod.Options) ;
            config.Routes.IgnoreRoute("OPTIONS", "*pathInfo", constraints);

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/controller/id",
                defaults: new  id = RouteParameter.Optional 
            );
        
    

如何解决这个 CORS 问题，而不是在 crome 中使用允许 cors 或 cors unblock 等扩展。请帮忙？？

【参考方案1】：

CORS policy（跨域资源共享）通常意味着不允许跨站点请求（从您的站点 (localhost) 到另一个站点 (firebase API) ），除非资源服务器明确将您列入白名单，通过使用“Access-Control-Allow-Origin”标头。

Firebase API 似乎阻止了您的请求，因为该请求来自不允许的来源，因此您需要配置 Firebase 设置以允许来自本地主机的请求。我不熟悉 FirebaseStorage，但我遇到了一些可能有帮助的 other answer（或者只是谷歌“firebase storage api cors localhost”）

【讨论】：

有什么我可以在不触碰 Firebase 的情况下做的事情吗？

很可能不是。一般来说，如果用户可以配置设置以允许自己使用，那是没有意义的——资源服务器必须明确地将用户的源列入白名单。恐怕你必须调整 Firebase