codeigniter4 和 vue3 上的 CORB（跨源读取阻止）问题

Question

我使用 codeigniter4 作为后端，使用 vue3 作为前端。在vue3中显示图像时出现此问题： 响应被 CORB（跨源读取阻止）阻止 跨源读取阻止 (CORB) 阻止了跨源响应。

请帮我解决这个问题。

这是我的代码：

(codeigniter)
public function show($id = null)
{
    $model = new Product();
    $data = $model->find($id);
    if ($data) {
        $data['product_photo'] = base_url('uploads/' . $data['product_photo']);
        $data['supplier_names'] = $this->getSupplierNamesForProduct($id);
        return $this->respond($data);
    }
        return $this->failNotFound('Product not found');
}

(vue)
<script>
import axios from 'axios';

export default {
    name: 'ProductOverview',
    data() {
        return {
            productId: this.$route.params.id,
            product: {
                product_photo: '',
                // other product properties
            }
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
          axios.get(`http://localhost:8080/products/${this.productId}`)
          .then(res => {
               this.product = res.data;
          })
          .catch(error => {
              console.error("There was an error fetching the product data:", error);
          });
        }
    }
};
</script>

我希望 CORB 问题能够得到解决。

Answer 1

这实际上取决于您使用的 codeigniter 版本。如果是最新的，他们添加了类来处理所有 CORS 的东西。

您可以在此处查看文档

检查此配置类以及路由过滤器，以了解请求被阻止的原因。