显示订单的产品Vuejs和Laravel

// 安装包
composer require fruitcake/laravel-cors

// 在 app/Http/Kernel.php 中注册中间件
protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];

// 配置 config/cors.php
return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // Laravel 后端地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

// routes/api.php
Route::get('/products', function () {
    return response()->json([
        ['id' => 1, 'name' => 'Product 1'],
        ['id' => 2, 'name' => 'Product 2'],
    ]);
});

// src/components/ProductList.vue
<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    axios.get('/api/products')
      .then(response => {
        this.products = response.data;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  },
};
</script>