Laravel项目集成OpenAI PHP API后端报错419求助

问题情况 #

在个人Laravel项目中使用openai-php/laravel时，前端提交的消息能显示在聊天框，但POST请求XHR POST http://127.0.0.1:8000/send返回419错误，控制台提示Fetch error: Server error。直接在JavaScript中调用OpenAI API端点可正常获取JSON响应，需求是实现后端处理逻辑，不排斥使用jQuery。

现有代码 #

JavaScript代码 #

//CSRF TOKEN
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.openai.com/v1/chat/completions', true);
xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);

const button = document.getElementById('button-submit');
const chatWindow = document.getElementById('chat-window');
const url = '{{ url('send') }}';

//API FETCH ON BUTTON CLICK
button.addEventListener('click', function (){
    const input = document.getElementById('input').value;

    chatWindow.innerHTML += `<div class="messages-user">
    <div class="__user">
        <p>${input}</p>
    </div>
    <img src="{{ asset('/images/avatar.png') }}" alt="Avatar">
    <div style="clear: both"></div>
    </div>`;

    fetch(url, {
        method: 'POST',
        body: JSON.stringify(input),
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer "MY_OPENAI_KEY"'
        }
    }).then(function(response) {
        if (response.ok) {
            return response.text();
        } else {
            throw new Error('Server error.');
        }
    }).then(function(data) {
        chatWindow.innerHTML += `<div class="messages-bot">
                        <div class="__bot">
                            <p>${data}</p>
                        </div>
                        <img src="{{ asset('/images/chatbot.png') }}" alt="Avatar">
                        </div>`;
    }).catch(function(error) {
        console.log('Fetch error:', error.message);
    });
});

web.php路由代码 #

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChatBotController;

Route::get('/', function () {
    return view('welcome');
});

Route::post('send', [ChatBotController::class, 'sendChat']);

ChatBotController控制器代码 #

public function sendChat(Request $request){
    $result = OpenAI::completions()->create([
        'max-token' => 100,
        'model' => 'text-davinci-003',
        'prompt' => $request->input
    ]);

    $response = array_reduce(
        $result->toArray()['choices'],
        fn(string $result, array $choice) => $result . $choice['text'], ""
    );
    
    return $response;
}

修复步骤 #

1. 解决CSRF验证失败（419错误核心） #

Laravel的POST请求必须携带CSRF令牌，你的fetch请求中缺少该令牌，同时前端不应暴露OpenAI密钥（密钥需存在后端）。修改fetch部分代码：

fetch(url, {
    method: 'POST',
    body: JSON.stringify({ input: input }), // 将输入包装为对象，方便后端解析
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken // 添加CSRF令牌
    }
})

同时删除开头无用的XMLHttpRequest代码块，这段代码未实际使用。

2. 修正后端请求接收与API参数 #

• 后端需要解析JSON格式的请求数据，使用$request->json('input')获取前端传入的内容
• OpenAI API参数名错误：max-token应改为max_tokens
• 返回JSON格式响应更符合前后端交互规范

修改控制器代码：

use Illuminate\Http\Request;

public function sendChat(Request $request){
    $prompt = $request->json('input');
    $result = OpenAI::completions()->create([
        'max_tokens' => 100,
        'model' => 'text-davinci-003',
        'prompt' => $prompt
    ]);

    $response = array_reduce(
        $result->toArray()['choices'],
        fn(string $result, array $choice) => $result . $choice['text'], ""
    );
    
    return response()->json($response);
}

3. 前端适配后端JSON响应 #

后端返回JSON格式，前端需将response.text()改为response.json()：

.then(function(response) {
    if (response.ok) {
        return response.json();
    } else {
        throw new Error('Server error.');
    }
}).then(function(data) {
    chatWindow.innerHTML += `<div class="messages-bot">
                    <div class="__bot">
                        <p>${data}</p>
                    </div>
                    <img src="{{ asset('/images/chatbot.png') }}" alt="Avatar">
                    </div>`;
})

4. 后端配置OpenAI密钥 #

在项目根目录的.env文件中添加密钥（openai-php/laravel会自动读取该配置）：

OPENAI_API_KEY=你的OpenAI密钥

内容的提问来源于stack exchange，提问作者vLk171x