Vue + Laravel + tinymce 上传图片被 CORS 策略阻止答案

【问题标题】：Vue + Laravel + tinymce upload image blocked by CORS policyVue + Laravel + tinymce 上传图片被 CORS 策略阻止
【发布时间】：2019-11-15 07:42:55
【问题描述】：

我想在 TinyMCE 编辑器中上传图片，但我已被 CORS 政策阻止。我在我的 Laravel 项目中设置了 CORS。其他功能可以从这个 Laravel 项目中获取数据

这些是我的 Javascript 设置：

uploadImg(blobInfo, success, failure) {
      let formData = new FormData();
      formData.append("file", blobInfo.blob(), blobInfo.filename());
      this.axios({
        method: "post",
        url: "/test2",
        headers: {
          "Content-Type": "multipart/form-data"
        },
        withCredentials: false,
        data: formData
      }).then(res => {
        console.log(res.data);
      });
    }

这些是我的 CORS 设置：

public function handle(Request $request, \Closure $next)
    {
        $this->headers = [
            'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE',
            'Access-Control-Allow-Headers' => $request->header('Access-Control-Request-Headers'),
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age' => 1728000 
        ];

        $this->allow_origin = [
            'http://localhost',
            'http://localhost:8080',
            'http://localhost:8000',
        ];


        $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';

        if (!in_array($origin, $this->allow_origin) && !empty($origin)){
            return new Response('Forbidden', 403);
        }


        if ($request->isMethod('options'))
            return $this->setCorsHeaders(new Response('OK', 200), $origin);

        $response = $next($request);
        $methodVariable = array($response, 'header');

        if (is_callable($methodVariable, false, $callable_name)) {
            return $this->setCorsHeaders($response, $origin);
        }
        return $response;
    }

    /**
     * @param $response
     * @return mixed
     */
    public function setCorsHeaders($response, $origin)
    {
        foreach ($this->headers as $key => $value) {
            $response->header($key, $value);
        }
        if (in_array($origin, $this->allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $origin);
        } else {
            $response->header('Access-Control-Allow-Origin', '');
        }
        return $response;
    }

这是错误信息： error message

谁能告诉我我在哪里做错了？谢谢

【问题讨论】：

您需要在 CORS 标头中添加域。在 laravel 你可以检查github.com/barryvdh/laravel-cors
有时它并没有真正被CORS阻塞，可能是一些程序错误
就像牡蛎说的。如果服务器端脚本在响应之前失败，则无法返回 cors 标头。看看你得到什么回应会很有帮助。
您能否显示浏览器为此预检请求发送了哪些标头？

标签： laravel vue.js axios tinymce-4

【解决方案1】：

您可以在禁用 cors 策略的情况下启动 Chrome 或 chromium。这将有助于调试检查这个答案如何做到这一点here 查看有关如何在 laravel here 中执行此操作的答案@

【讨论】：

它应该将域添加为 CORS 标头中允许的域。即使在生产中也会出现这种情况，而且这个解决方案只是一个临时解决方案。
已编辑答案。就像我之前所说的它对调试很有帮助，除了他没有将应用程序投入生产之外，并没有说这是最好的解决方案。
在这种情况下你应该评论:) meta.stackoverflow.com/questions/297066/…
谢谢大家，我发现了问题:) 是我返回数据的问题。