如何使用laravel，VUE和NUXT.js通过API下载CSV文件？

问题描述

基本上，API端上的所有代码都存在并且可以正常工作。我们可以假设。

此外，我很确定前端Vue代码也可以使用。

我遇到的麻烦是，当您按下导出按钮时，我们收到CORs错误。我们根本没有其他COR问题。一切正常。除了此文件下载。我确实附加了exportPDF方法。

Access to XMLHttpRequest at URL from origin https://localhost has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

完整的RAW：

Access to XMLHttpRequest at 
'https://example.com/api/v2/messages?Access-Control-Allow-Origin=*&Content-disposition=form-data&csv_fields[]=id&csv_fields[]=item_id&csv_fields[]=promo_item_id&csv_fields[]=title&csv_fields[]=sent_at&csv_fields[]=sent_total&sort=sent_at%7Cdesc' 
from origin 'https://localhost:3030' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在请求包含'Access-Control-Allow-Origin': '*'的请求中，我进行了几次失败的尝试，但这无济于事。不出所料。上一次我必须使用API处理文件时，我做了一条网络路由来解决它，但这实际上并不能解决问题。它只是绕过API。您可以看到以前的开发人员“ // need to handle downloading the file.”的注释

有想法吗？


async exportCsv() {
  await this.$axios
    .$get(this.getRoute('index'),{
      params: {
        // My Poor attempt next two lines: 
        'Access-Control-Allow-Origin': '*','Content-disposition': 'form-data',csv_fields: this.headerValues,sort: this.table.sort[0],...this.filters
      },})
    .then((response) => {
      // need to handle downloading the file.
      // currently CORS is not handling the request
      if (response.data.task) {
        this.$store.dispatch('snackbar/show',{
          message: `Export successfully requested. ID: ${response.data.task}`
        })
      }
    })
},

这是我的导出代码，它来自一种称为Tablify的方法，我们使用该方法来格式化代码以返回Vue数据表。

有一个if ($request->has('csv_fields'))，它调用了此方法。

use MyCompany\Jobs\ExportCsvJob;

/**
 * Exports the request into a CSV file.
 */
protected function exportCsv(Request $request,Builder $builder)
{
    $fields = collect(Arr::wrap($request->input('csv_fields')));
    $fields = $fields->filter(function ($field) {
        return $this->getTableColumns()->contains($field);
    })->toArray();

    if ($builder->count() <= 1000) {
        return export_csv($fields,$builder->get()); // <-- See func below
    }

    $task = Task::make([
        'name' => 'Exporting CSV','description' => 'Exporting CSV','data' => [
            'download' => '',],]);
    auth()->user()->tasks()->save($task);

    ExportCsvJob::dispatch($fields,$task,$builder);

    return ['task' => $task->id];
}

function export_csv(array $fields,Collection $data,$filename = 'export.csv')
{
    Csvexport::output($fields,$data,$filename);

    if ('testing' !== App::environment()) {
        exit;
    }
}

public static function output(array $fields,$filename = 'export.csv')
{
    header('Content-Type: text/csv; charset=utf-8');
    header('Content-disposition: attachment; filename='.$filename);
    header('Access-Control-Allow-Origin *'); <-- just added that. 
    $output = fopen('PHP://output','w');

    fputcsv($output,$fields);
    foreach ($data as $item) {
        fputcsv($output,self::createRowFromItem($fields,$item));
    }

    fclose($output);
}

我添加了标题之后：header（'Access-Control-Allow-Origin *'）; 我现在收到一个ERR_HTTP2_PROTOCOL_ERROR

我还没有看到任何其他与通过API获取文件直接相关的问题。

感谢提前的筹款活动！

解决方法

Laravel> 7.x可以使用您配置的值自动响应CORS OPTIONS请求。所有CORS设置都可以在您的cors配置文件中进行配置，并且OPTIONS请求将由全局中间件堆栈中默认包含的HandleCors中间件自动处理。

有关CORS和CORS标头的更多信息，请查阅Laravel> 7中包含的MDN web documentation on CORS和laravel-cors软件包。

如果您有较旧的Laravel版本，则可以在兼容版本中安装此软件包。

laravel laravel laravel-api nuxt.js vue.js