PHP CodeIgniter4框架前后端分离跨域解决

PHP CodeIgniter4框架前后端分离跨域解决

方案一:

修改system/CodeIgniter.php文件

在这里插入图片描述

			if ($this->request->getMethod() === 'options') {
                $this->response
                    ->setHeader('Access-Control-Allow-Origin', '*')
                    ->setHeader('Access-Control-Allow-Method', '*')
                    ->setHeader('Access-Control-Allow-Headers', '*')
                    ->setStatusCode(200,'OK');
            }else{
                $this->response = $this->handleRequest($routes, config(Cache::class), $returnResponse);
            }

方案二:

  1. 添加 app/Filters/CorsFilter.php 文件
<?php

namespace App\Filters;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

class CorsFilter implements FilterInterface
{
    // 前置过滤器
    public function before(RequestInterface $request, $arguments = null)
    {
        $response = service('response');
        $response->setHeader('Access-Control-Allow-Origin', '*');
        $response->setHeader('Access-Control-Allow-Method', '*');
        $response->setHeader('Access-Control-Allow-Headers', '*');
        if($request->getMethod(FALSE)=='options'){
            return $response->setStatusCode(200,'OK');
        }
    }

    //--------------------------------------------------------------------
    // 后置过滤器
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        // Do something here

    }
}
  1. 修改 app/Config/Filters.php 文件
public array $aliases = [
        'cors'          => App\Filters\CorsFilter::class,
        ...
];
public array $globals = [
        'before' => [
            'cors',
            ...
        ],
        'after' => [
        	...
        ],
    ];
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
PHP 和 Vue.js 前后端分离的情况下,可以使用以下方式进行通信: 1. 创建 API 接口:使用 PHP 编写 API 接口,提供数据服务。可以使用任何 PHP 框架,如 Laravel、Symfony、CodeIgniter 等。 2. 发送 AJAX 请求:在 Vue.js 中使用 AJAX 请求调用 PHP API 接口,获取数据。可以使用 Vue.js 的内置库或第三方库,如 Axios、jQuery 等。 3. 解析响应数据:在 Vue.js 中解析 PHP 接口返回的数据,并更新 Vue.js 组件中的数据。可以使用 Vue.js 的响应式机制、计算属性等特性。 下面是一个简单的示例: 在 PHP 中创建 API 接口: ```php <?php $data = array( array('id' => 1, 'name' => 'John Doe', 'email' => 'johndoe@example.com'), array('id' => 2, 'name' => 'Jane Smith', 'email' => 'janesmith@example.com') ); header('Content-Type: application/json'); echo json_encode($data); ?> ``` 在 Vue.js 中发送 AJAX 请求并解析响应数据: ```javascript // 在 Vue.js 组件中发送 AJAX 请求 axios.get('http://example.com/api.php') .then(function (response) { // 解析响应数据 this.items = response.data; }) .catch(function (error) { console.log(error); }); // 在 Vue.js 组件中使用响应式机制更新数据 export default { data() { return { items: [] } }, mounted() { // 发送 AJAX 请求并解析响应数据 axios.get('http://example.com/api.php') .then(function (response) { // 解析响应数据 this.items = response.data; }) .catch(function (error) { console.log(error); }); } } ``` 在上面的示例中,我们在 PHP 中创建了一个简单的 API 接口,返回一个包含两个用户的数组。在 Vue.js 中,我们使用 Axios 库发送 AJAX 请求,并在响应中更新 Vue.js 组件的数据。最终,我们使用 Vue.js 的响应式机制将数据渲染到组件中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

易_帆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值