Angular 文件上传到 Laravel。请求的资源上不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：Angular file upload to Laravel. No 'Access-Control-Allow-Origin' header is present on the requested resourceAngular 文件上传到 Laravel。请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2019-01-18 19:15:29
【问题描述】：

所以我一直在开发一个 Angular 5 - Laravel 应用程序，其中 Angular 是前端，而 Laravel 作为 API 工作。

到目前为止，该项目已经能够执行几乎所有的 CRUD 操作，但是直到现在我还没有上传任何文件，这就是这个问题开始出现的原因。

我收到以下错误作为来自 laravel 的响应：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经在 laravel 中有一个 CORS 中间件设置如下：

return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PATCH, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With, Accept');

上传文件的角度逻辑是这样的：

控制器：

addActivity(): void {
    let formData = new FormData();
    formData.append('name', this.newActivity.name);
    formData.append('turnedInDate', (new Date(this.newActivity.turnedInDate)).toUTCString());
    formData.append('file', this.newActivity.file, this.newActivity.fileName);

    this.isLoadingModal = true;

    this.activitiesService.create(formData, this.studentSelected.id, true)
      .finally(() => this.isLoading = false)
      .subscribe(
        response => {},
        (error: AppError) =>{ throw error; }
      );
  }

服务：

create(data: any, parentId?: number, appendHeaders?: boolean): Observable<any> {
    let options = null;

    if(appendHeaders) {
      let headers = new Headers();
      headers.append('Content-Type', 'multipart/form-data');
      options = new RequestOptions({ headers: headers });
    }

    return this.http.post(this.url + this.parentEndpoint + (parentId || '') + this.endpoint + this.token, data, options)
      .catch(this.handleError);
  }

这个和我放的任何其他标题都会给我提到的错误，尤其是“multipart/form-data”给我以下错误：

Missing boundary in multipart/form-data POST data in Unknown on line 0

我尝试过不发送任何标头，一个“Accept: application/json”标头，但对于这种特殊情况，Laravel 似乎并不关心并返回错误，就好像不存在 CORS 中间件一样。

【问题讨论】：

客户端将首先发送一个 OPTIONS 请求，然后如果 cors 标头正常，它将发送实际的 POST，所以在不了解 Laravel 的情况下，我猜你没有检查请求方法.如果是 OPTIONS，您应该只返回标头并停止处理，这可能就是错误“缺少边界”的原因。另外，我认为这些天有些浏览器不允许 * 使用 POST 作为允许来源。您需要检查选项请求中的 Origin -header 并将 Access-Control-Allow-Origin 设置为相同的值（或硬编码的值，即完整协议+域+端口）。
嗯，到目前为止，我已经能够完成对 Laravel 的每个请求，几乎每个 CRUD 操作都使用上面设置的配置。但是这些请求没有任何文件，现在这个有一个文件，由于“访问控制允许来源”错误，我无法成功接收到 Laravel 的请求。边界是因为我设置的多部分标题，但将其取下并不会显示，所以我将省略它。问题出在另一个人身上
在 laravel 上试试这个 github.com/barryvdh/laravel-cors
如上所述，我已经在 laravel 中有一个 cors 中间件
网络标签中的常规帖子和上传的标题如何比较？起源在吗？顺便说一句，如果您使用的是 HttpClient，我认为您不需要在数据为 FormData 时设置内容类型。

标签： angular laravel file http cors

【解决方案1】：

好吧，在 Laravel 中，我想打印 $request 变量以查看服务器是否正确接收了所有内容，例如：

public function store(Request $request, $id) {
    print_r($request);
    echo $id;
}

我刚刚评论了 print_r 行，错误就消失了。 id 被正确回显，所以我将 $file 变量设置为 $request->file('file);一切正常。

不确定打印 $request 与抛出“Access-Control-Allow-Origin”错误有什么关系。

【讨论】：