CORS/JavaScript/Laravel:向数字海洋服务器发送请求并接收数据(标头问题)

Question

所以，我要做的是使用数字海洋液滴作为托管在不同服务器上的应用程序的api。目前，我只是在开发，所以这个服务器来自我的本地主机：3000。

在我的客户端代码(JavaScript(上，我有：

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

最后，在我的Laravel

应用程序(Laravel框架5.8.18(中，我在routes/api.php下有一条路线：

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

我有一个控制器CreateData.php：

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class CreateImage extends Controller
{
    /**
     * Handle the incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function __invoke(Request $request)
    {
        return response('Hello World', 200)
            ->header('Content-Type', 'application/json; charset=UTF-8')
            ->header('Access-Control-Allow-Origin', '*');
    }
}

问题是当我尝试运行此请求时，出现 CORS 错误：

跨源请求被阻止：同源策略不允许在 http://my-droplet-ip/api/create-image 读取远程资源。(原因：缺少 CORS 标头"访问控制-允许源"(

在网络选项卡下，我找不到 404，并且响应中不存在 Access 标头。

对这个问题有什么想法吗？

Answer 1

有一个简单的解决方案，可以在本地计算机上进行测试。

你可以只输入索引文件来允许cors，但我建议你为此构建中间件。

这是一个链接，它解释得非常好：(

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

您也可以将其放在索引中.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");

希望对:D有所帮助