如何解决如何使用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版本,则可以在兼容版本中安装此软件包。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。