swoole,http\server 跨域---记一次php网站跨域访问上机实验

缘由：为了更好的体验swoole组件优良的协程Mysql客户端，实现更好的并发设计；写了一个小程序。

环境准备：

没有采用任何框架，只是使用了smarty模版，来渲染后端php响应的数据，在一个html文件中有如下实现

• html部分

"en">

"utf-8">
"viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">
"description" content="">
"Access-Control-Allow-Origin" content="*" />
"author"
    content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
"generator" content="Jekyll v3.8.5">


"canonical"
    href="https://v4ing.bootcss.com/docs/4.3/examples/dashboard/">


"http://staticsrc.cn:8888/bootstrap.css" rel="stylesheet">


......省略若干html代码

            
"main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
                <div
                    class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
                    
class="h2">添加新订单项目
"hintword">
                    
class="btn-toolbar mb-2 mb-md-0">
                        
class="btn-group mr-2">
                            "button" class="btn btn-sm btn-outline-secondary">Share
                            "button" class="btn btn-sm btn-outline-secondary">Export
                        
                        "button"
                            class="btn btn-sm btn-outline-secondary dropdown-toggle">
                            "calendar"> This week
                        
                    
                

class="row">

class="col-md-4 mb-3"> for="item">项目编码(字母) "text" class="form-control" id="colname" placeholder="" value="" required>

class="invalid-feedback"> Valid first name is required.

class="col-md-4 mb-3"> for="colname">项目名称(中文描述) "text" class="form-control" id="comment" placeholder="" value="" required>

class="invalid-feedback"> Valid last name is required.

class="row">

class="col-md-4 mb-3"> for="comment">明细分类 <select class="custom-select d-block w-100" id="mxname" required> "incomedoc_mx">明细 "incomedoc">表头 select>

class="invalid-feedback"> Please select a valid country.

class="col-md-4 mb-3"> for="mxbz">分类标记 <select class="custom-select d-block w-100" id="mxbz" required> "s">明细从表 "m">明细主表 "h">表头 select>

class="invalid-feedback"> Please provide a valid state.

class="row">

class="col-md-8 mb-3"> for="state"> class="btn btn-primary btn-lg btn-block" onclick="postclick();" type="button">提交

原计划点击提交按钮后，由jquery函数postclick()将请求提交给一.php文件处理，这个php文件逻辑实现大致如下(伪代码)：

php
 go(function(){
    //'若干逻辑实现.......'
    echo $request->get['jsoncallback']
    //'若干逻辑实现.......'
});
?>

但是，非常不幸.......浏览器端接连提示500错误，但php文件单独执行，并没报错，看来swoole库无法通过这种常规的技术手段简单的嵌入html代码

• 正确的解决方案

受到一个小"骚"友的启发，（他用Swoole\Http\Server实现了mysql的连接池），可我渴求成功的欲火难耐，于是准备试试Swoole\Http\Server包裹Mysql客户端协程的处理方案

php
require('../../../config.php');
use Swoole\Coroutine as co;
//echo $_POST['colname'];
$result='';
$http = new Swoole\Http\Server("http://ryanbackdb.com", 9501);
$http->on('request', function ($request, $response) {
    //var_dump($request);
    $response->header('Access-Control-Allow-Origin', '*');#这行尤其重要，服务器必须允许跨域访问
    $response->header('Content-Type', 'application/json');
    $jsoncallback = htmlspecialchars($request->get['jsoncallback']);#获取jquery跨域路由中jsoncallback的部分
    go(function () use($response,$jsoncallback){#逻辑部分可以根据实际业务需要编写
        $json_data = '["customername1","customername2"]';
        //$response->write($_callback."(".$data.")");
        $response->write($jsoncallback . "(" . $json_data . ")");#返回处理后的结果
        $response->end();
    });
});
$http->start();

写好后就运行了，没错，这样一来，在9501端口上就运行了一个Swoole\http\server服务器，我们根据实际需求可以继续丰富功能，例如根据路由的不同，编写不同的协程完成不同的功能，当然，这样一来就违反了同源策略，需要跨域处理

• 一个可以携带大量查询/提交参数的写法

php
$http = new Swoole\Http\Server("127.0.0.1",9501);
$http->on('request',function ($request,$response){
    $params = $request->get;
    var_dump($params);
    $response->header('Access-Control-Allow-Origin', '*');
    $jsoncallbacks = htmlspecialchars($request->get['jsonpCallback']);
    echo "这里是回调函数的名字";
    var_dump($jsoncallbacks);
    go(function () use($jsoncallbacks,$response){
        $json_data = '["customername1","customername2"]';
        $response->write($jsoncallbacks . "(" . $json_data . ")");
        $response->end();
    });
});
$http->start();
?>

　　　　function postclick()
        {
            $.ajax({
                method:"POST",
                url:"http://127.0.0.1:9501/",
                data:{'colname':$("#colname").val(),'comment':$("#comment").val(),'mxname':$("#mxname").val(),'mxbz':$("#mxbz").val()},//好像不支持formdata，浏览器控制台，后端日志不报错，但是后台程序无法获取提交的数据
                dataType: "jsonp",
                jsonp: "jsonpCallback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
                jsonpCallback: "duwa",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                success:data =>{
                    console.log("这里的data乃是回调函数的名字： "+data)
                },
                error:error =>{
                    console.log(`error为${error.data}`)
                }
            })
        }