Question

我想在按下按钮时使用Ajax向其他服务器发送POST请求。但我收到错误消息：

XMLHttpRequest无法加载https://www.example.com/hello。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“https://my.site.com”访问。

这是我的按钮：

<button id="my-button">Click me pls</button>

这是JS代码：

document.getElementById("my-button").addEventListener("click", function (evt) {
    var request = new XMLHttpRequest();
    request.open('POST', 'https://www.example.com/hello', true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    request.setRequestHeader('X-CSRF-TOKEN', "<...>");

    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            console.log(request.responseText);
        }
    };

    request.send("message=Thisismymessage&" +
                "_token=<...>");

    evt.preventDefault();
    return false;
});

/ hello应该处理并将消息存储在数据库中。

在服务器端，我正在使用Laravel 5.4。

这是我的路线：

Route::post('/hello', 'Auth\RegisterController@hello')
    ->middleware('cors');

cors Middleware看起来像这样：

namespace App\Http\Middleware;

use Closure;

class Cors
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'https//my.site.com')
            ->header('Access-Control-Allow-Methods', 'GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS')
            ->header('Access-Control-Allow-Headers', 'origin, content-type, accept, authorization');
    }
}

RegisterController中的hello方法只接收数据（在本例中为消息“Thisismymessage”）并将其放入数据库中。

protected function hello(Request $request)
{
    // Working with the data...
}

你们有没有想过如何解决它？

我的另外一个问题是：有没有办法从另一个不使用Laravel作为框架的应用程序“生成”来自Laravel的CSRF令牌，或者我是否需要复制＆amp;手动粘贴？

提前谢谢。

Answer 1

我可以推荐一些小问题来解决第二个问题，即：

有没有办法从另一个不使用Laravel作为框架的应用程序“生成”来自Laravel的CSRF令牌，或者我是否必须复制＆amp;手动粘贴？

在应用的后端创建一个终点，以生成表单视图。在制作此表单时，您应该已经包含了csrf_token字段，以便在您的前端有一个完整的表单，您将再次提交。

这看起来像一条很长的蛇。

更推荐的方法是：看起来你正在构建一个api，这很容易因为它的无状态。使用带有JWT-AUTH的api密钥示例，这样您就不必使用csrf令牌处理任何事情。

对于第一个问题：

你应该从你的后端解决一个好的问题Cors middleware for Laravel 5

其他：不推荐，但出于测试目的，您可以在控制器的constructor中添加这些内容，以了解您的应用是如何公平的：

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

请记住：只有在进行测试时才有用。

POST请求其他服务器

1 个答案: