如何解决 Vuejs + Laravel 中的混合内容阻塞错误

Question

我在共享主机中部署了前端和后端。 当我调用 api 时，会在浏览器控制台中显示此错误。

xhr.js:210 Mixed Content: The page at 'https://front.thecomicden.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://back.thecomicden.com/api/allTask'. This request has been blocked; the content must be served over HTTPS.

createError.js:16 Uncaught (in promise) Error: Network Error

Vuejs 方法

created(){
            this.axios.get("http://back.thecomicden.com/api/allTask").then(Response=>(this.tasks=Response.data.allTask))
        },

Laravel Api 路由文件

<?php

use App\Http\Controllers\TaskController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;


Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});


Route::get('/allTask',[TaskController::class, 'getAllTask']);

Laravel 任务控制器

<?php

namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
   
    public function getAllTask(){
        $task=Task::all();
        return response()->json(['allTask'=>$task],200);
    }


}

Answer 1

在 yoru axios 请求中将 http:// 替换为 https://。

试试这个。

created(){
            this.axios.get("https://back.thecomicden.com/api/allTask").then(Response=>(this.tasks=Response.data.allTask))
        },