时间戳

首页 > 解决方案 > 无法从谷歌表单加载 csv 文件

angular - 无法从谷歌表单加载 csv 文件

问题描述

export class TopicComponent {

  csvUrl = 'https://docs.google.com/spreadsheets/d/1DEhSS05msJGTV7rIZEPBjYFH_FK2G3o4okWTdi_Xxsc/edit?usp=sharing';
  csvData: any [] = [];
  constructor(private http: Http) { }

    readCsvData() {
      this.http.get(this.csvUrl)
      .subscribe(
        data => this.extractData(data),
        err => this.handleError(err)
      );
    }
 
    private extractData(res: any) {
      let csvData = res['_body'] || '';
    let allTextLines = csvData.split(/\r\n|\n/);
    let headers = allTextLines[0].split(',');
    let lines = [];

    for ( let i = 0; i < allTextLines.length; i++) {
        // split content based on comma
        let data = allTextLines[i].split(',');
        if (data.length === headers.length) {
            let tarr = [];
            for ( let j = 0; j < headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    this.csvData = lines;
    }

    private handleError (error: any) {
 
      let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
      console.error(errMsg); // log to console instead
      return errMsg;
    }
<h2>CSV data</h2>
<div>
  <button class="btn btn1 btn2" (click)="readCsvData()">Read Csv Data</button>
</div>
<br/><br/>

<div>
  <table border="1" class="demoTable">
    <tr *ngFor = "let x of csvData">
      <td *ngFor = "let y of x ">{{ y }}</td>
    </tr>
  </table>
</div>
我以表格的形式将谷歌表单 csv 响应链接到我的角度应用程序，但在执行时，遇到以下错误 -

预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 X-XSRF-TOKEN。

这是遇到的错误的图像

请帮忙！！

标签： angulargoogle-formsangular-httpangular-httpclient

解决方案

有同样的问题。就我而言，原因是在我的 Chrome cookie 中保存了 X-XSRF-TOKEN 字段。并且不知何故，Chrome 将标题 'Access-Control-Request-Headers: x-xsrf-token' 添加到 OPTION 请求中。在 Firefox 中，相同的页面可以正常工作，在隐身模式 Chrome 中也是如此。所以我刚刚删除了这个 cookie 字段（X-XSRF-TOKEN），仅此而已。

推荐阅读