TP5跨域试错

学了TP框架，要搞一个CRUD的demo案例，没成想上来就卡在跨域这一步。哈哈！！

尝试1：修改入口文件

// 在项目的入口文件里，添加以下三行代码
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE, PUT");
header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

//结果：只有GET请求生效，其他仍然无效

浏览器在处理复杂请求前，会先发出一个OPTIONS请求。只有OPTIONS请求收到状态码为200的响应，浏览器才会处理复杂请求。单凭设置请求头，根本不能对OPTIONS请求作出响应。

尝试2：设置路由允许跨域

// 这是看官方文档得来的，tp5.1本身支持跨域，只需在定义路由时添加一段代码
// Route::resource('api/song', 'api/Song');
Route::resource('api/song', 'api/Song')->allowCrossDomain();

//结果：改完后，PUT和POST还是有跨域

TP官方解释：这么做相当于又添加一套OPTIONS路由

尝试3：添加跨域行为

// 新建行为文件：api\behavior\CORS.php
<?php
namespace app\api\behavior;
class CORS
{
    public function run()
    {
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: token,Origin, X-Requested-With, Content-Type, Accept");
        header('Access-Control-Allow-Methods: *');
        if (request()->isOptions()) {
            exit();
        }
    }
}

// 在application\tags.php中加载
// 应用初始化
'app_init'     => [
  'app\\api\\behavior\\CORS'
]

// 到这一步：除了POST，其他的跨域问题都解决

最终方案

初入TP，各种问题都还不熟，自己搞了一天，还是没完全解决。当时我那个失意啊，是真不太想弄了。后来请求大佬帮助，问题得以解决。原来前端axios的post请求的数据，一定要使用qs包转换。

补充

前端也可以自己解决跨域，比如Vue,React项目中使用http-proxy-middleware包作代理解决。究其根本，跨域是浏览器本身的限制。所以也可以从浏览器上解决：谷歌浏览器有个CORS插件，安装并打开后，可允许页面跨域访问。