CORS / JavaScript / Laravel：向Digital Ocean服务器发送请求并接收数据（标头问题）

Question

So, what I'm trying to do is use a Digital Ocean droplet as an api for an application hosted on a different server. Currently, I'm just developing so this server is from my localhost:3000.

On my client side code (JavaScript) I have:

  handleSendData = () => {
    const request = new XMLHttpRequest()
    request.open('POST', 'http://my-droplet-ip/api/create-image')
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')
    request.setRequestHeader('Access-Control-Allow-Origin', 'http://my-droplet-ip')
    request.send(JSON.stringify(data-object))
  }

Finally, in my Laravel application (Laravel Framework 5.8.18) I have a route under routes/api.php :

Route::post('/create-image', 'CreateData');

And I have a controller CreateData.php :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CreateImage extends Controller
{
    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {
        return response('Hello World', 200)
            ->header('Content-Type', 'application/json; charset=UTF-8')
            ->header('Access-Control-Allow-Origin', '*');
    }
}

The problem is when I try to run this request, I get a CORS error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://my-droplet-ip/api/create-image . (Reason: CORS header 'Access-Control-Allow-Origin' missing)

Under the networking tab I get a 404 not found and the Access header is not there in the response.

Any thoughts out there on this issue?

Answer 1

There is a simple solution to this and it is ok for testing on you local machine.

You could just put in index file to allow cors, but I suggest you building middleware for this.

Here is a link it is explained really nice:)

https://medium.com/@petehouston/allow-cors-in-laravel-2b574c51d0c1

You can put also this in index.php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

Hope it helps :D