（tp6框架，前端为vue3文件）列表数据渲染不被同源策略阻止，前端为vue3文件）列表数据渲染不被同源策略阻止，但对列表数据进行操作时受跨域资源共享（CORS）问题影响

Question

（tp6框架，前端为vue3文件）列表数据渲染不被同源策略阻止，但对列表数据进行操作时受跨域资源共享（CORS）问题影响，如何解决？

已配置代理
且商品列表数据渲染成功

控制台显示

Answer 1

引自免费微信小程序：皆我百晓生

要解决这个问题，首先确认您的前端 Vue 应用程序和后端 TP6 框架服务器已经正确配置了代理，并且可以正常获取数据。从您提供的信息来看，前端通过 proxy 配置已经可以获取到商品列表数据，但是当尝试向 /api/tp/public/index.php/add 进行 POST 请求时遇到了 404 错误。

这可能是因为后端接口路径设置错误，或者是其他原因导致的资源未找到。以下是针对这个问题的几个排查步骤：

1. 检查后端接口路径: 确保后端 TP6 框架的接口路径正确无误。如果后端接口实际位置不是 /api/tp/public/index.php/add，则需要在前端的 axios 调用中更新正确的路径。

2. 检查后端路由配置: 在 TP6 中，检查应用的路由是否正确配置了 '/add' 路由并映射到了对应的控制器方法上。

3. 日志调试: 在后端 TP6 的控制台或者日志系统中查看是否有与这个请求相关的错误信息。

4. 前端代码调整: 确保前端发送的数据格式与后端预期的一致。例如，后端可能期望接收一个对象而不是字符串。

根据上述分析，我们先修改前端的 axios post 请求，将数据转换成对象，同时检查后端接口路径是否正确。这里提供一个修改后的 add 函数示例：

async function add(newItem) {
  try {
    // 将数据包装成对象
    const postData = {
      name: newItem.name,
      price: newItem.price
    };

    // 更新接口路径，确保与后端匹配
    const response = await axios.post('/add', postData);

    if (response.status === 200) {
      await getGoodsList();
      newItem.value = { name: '', price: '' };
    } else {
      console.error('请求失败:', response.data);
    }
  } catch (error) {
    console.error('添加商品错误:', error);
  }
}

此外，请确保在 TP6 后端有一个名为 /add 的路由处理函数，它接受 POST 请求并将数据保存到数据库。这是一个简化的 TP6 控制器示例：

<?php
namespace app\index\controller;

use think\Controller;
use think\Request;

class Goods extends Controller
{
    public function add(Request $request)
    {
        $data = $request->post();

        // 假设有一个 GoodsModel 来处理数据库操作
        $goodsModel = new \app\common\model\Goods();
        $result = $goodsModel->save($data);

        if ($result) {
            return json(['status' => 'success', 'message' => '添加成功']);
        } else {
            return json(['status' => 'error', 'message' => '添加失败']);
        }
    }
}

请确保已正确配置 TP6 的路由，以便将 /add 路径映射到上面的 add 方法。对于 TP6 的路由配置，请参考官方文档：https://www.kancloud.cn/manual/thinkphp6/237130

完成这些更改后，再次尝试添加商品功能，应该可以正常工作。如果仍然遇到问题，请检查后端的日志输出以获得更多信息。