Vue + Laravel + tinymce upload image blocked by CORS policy

Question

I want to upload images insinde the TinyMCE editor but i has been blocked by CORS policy. I had setting the CORS on my Laravel project. Other function is OK to get the data from this Laravel project

These are my Javascript settings:

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);
      });
    }

These are my CORS settings:

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;
    }

this is the error message: error message

Can anyone tell me where did i make a mistake? Thanks

You need to add the domain in CORS headers. In laravel you can check https://github.com/barryvdh/laravel-cors — Zenel Rrushi, Nov 15 '19 at 07:51
Sometimes it doesn't really block by CORS, it could be some program error — OysterD3, Nov 15 '19 at 07:54
Like Oyster said. If the server side script fails before the response, it can not return the cors headers. It would be helpful to see what response you get. — Gordon Freeman, Nov 15 '19 at 07:57
Could you show what headers are sent by browser for this preflight request? — Styx, Nov 15 '19 at 09:01

kenn · Answer 1 · 2019-11-15T08:08:06.720

-1

You could start Chrome or chromium with cors policy disabled. This would be helpful for debugging check this answer on how to do that here check ths answer on how to do it in laravel here

edited Nov 15 '19 at 08:08

answered Nov 15 '19 at 07:48

kenn

1,384
12
19

It should add the domain as an allowed one on CORS headers. This will be and issue even on production and this solution is just a temporary one. – Zenel Rrushi Nov 15 '19 at 07:50
edited answer.Like i said before its helpful in debugging, didn't say it was the best solution besides he has not moved the app to production. – kenn Nov 15 '19 at 08:09
in that case you should comment :) https://meta.stackoverflow.com/questions/297066/meta-meta-stack-overflow-when-should-i-answer-or-comment – Zenel Rrushi Nov 15 '19 at 08:11
Thanks everyone I found the problem :) Is my problem with returning data. – Tao Nov 15 '19 at 09:19

Vue + Laravel + tinymce upload image blocked by CORS policy

1 Answers1