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

环境准备：

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

  • html部分
<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport"

    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

<meta name="author"

    content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<meta name="generator" content="Jekyll v3.8.5">

<title>老板控制台</title>

<link rel="canonical"

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

<!-- Bootstrap core CSS -->

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

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

            <main role="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">

                    <h1 class="h2">添加新订单项目</h1><span id="hintword"></span>

                    <div class="btn-toolbar mb-2 mb-md-0">

                        <div class="btn-group mr-2">

                            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>

                            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>

                        </div>

                        <button type="button"

                            class="btn btn-sm btn-outline-secondary dropdown-toggle">

                            <span data-feather="calendar"></span> This week

                        </button>

                    </div>

                </div>

                <form>

                    <div class="row">

                        <div class="col-md-4 mb-3">

                            <label for="item">项目编码(字母)</label>

                            <input type="text" class="form-control" id="colname" placeholder="" value="" required>

                            <div class="invalid-feedback">

                                Valid first name is required.

                            </div>

                        </div>

                        <div class="col-md-4 mb-3">

                            <label for="colname">项目名称(中文描述)</label>

                            <input type="text" class="form-control" id="comment" placeholder="" value="" required>

                            <div class="invalid-feedback">

                                Valid last name is required.

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-md-4 mb-3">

                            <label for="comment">明细分类</label>

                            <select class="custom-select d-block w-100" id="mxname" required>

                                <option value="incomedoc_mx">明细</option>

                                <option value="incomedoc">表头</option>

                            </select>

                            <div class="invalid-feedback">

                                Please select a valid country.

                            </div>

                        </div>

                        <div class="col-md-4 mb-3">

                            <label for="mxbz">分类标记</label>

                            <select class="custom-select d-block w-100" id="mxbz" required>

                                <option value="s">明细从表</option>

                                <option value="m">明细主表</option>

                                <option value="h">表头</option>

                            </select>

                            <div class="invalid-feedback">

                                Please provide a valid state.

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-md-8 mb-3">

                            <label for="state"></label>

                            <button class="btn btn-primary btn-lg btn-block" onclick="postclick();" type="button">提交</button>

                        </div>

                    </div>

                </form>

<!--                 <canvas class="my-4 w-100" id="myChart" width="" height=""></canvas>

 -->

            </main>

        </div>

    </div>

    <script src="http://staticsrc.cn:8888/jquery-3.4.1.min.js"></script>

    <script src="../../jsconfig.js"></script>

    <script>

        function postclick() {

            $.getJSON("http://127.0.0.1:9501?jsoncallback=?", function(data) {

                $('#hintword').html(data);

            });

        }

    </script>

</body>

</html>

原计划点击提交按钮后，由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", );

$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",);

$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}`)

                }

            })

        }

swoole,http\server 跨域---记一次php网站跨域访问上机实验的更多相关文章

  1. 【Distributed】网站跨域解决方案

    一.概述 1.1 什么是网站跨域 1.2 网站跨域报错案例 二.五种网站跨域解决方案 三.使用JSONP解决网站跨域[1] 3.1 前端代码 3.2 后端代码 四.使用设置响应头允许跨域[2] 4.1 ...

  2. 关于jsonp跨域的问题以及解决方法(跨域、同源与非同源)

    什么是跨域? 想要了解跨域,首先需要了解下浏览器的同源机制: JSONP和AJAX相同,都是客户端向服务器端发送请求:给服务器端传递数据 或者 从服务器端获取数据 的方式 JSONP属于非同源策略(跨 ...

  3. 跨域原因及SpringBoot、Nginx跨域配置

    目录 概述 简单请求 跨域解决方案 概述 SpringBoot跨域配置 Nginx跨域配置 概述 MDN文档 Cross-Origin Resource Sharing (CORS) 跨域的英文是Cr ...

  4. SQL Server安全（7/11）：使用跨数据库所有权链接（Cross-Database Ownership Chaining）的跨数据库安全

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  5. 【笔记】vue-cli 开发环境中跨域连接后台api（vue-resource 跨域post 请求）

    在vue-cli 项目中很多人会用到mock 数据(模拟数据),但是我觉得如果在真实的数据库交互中开发会更有安全感一些,所以查了一下百度很多人推荐的就是: 跨域! 跨域是什么概念?不同的主机名,同主机 ...

  6. Swoole http server + yaf, swoole socket server + protobuf 等小结

    拥抱swoole, 拥抱更好的php Swoole 是什么? Yaf 是什么? 接触swoole已经4年多了,一直没有好好静下心来学习.一直在做web端的应用,对网络协议和常驻内存型服务器一窍不通.一 ...

  7. 服务器搭建域控与SQL Server的AlwaysOn环境过程（一） 搭建域控服务器

    0 准备阶段 1. Windows Server 服务器 3台(其中域控服务器配置可降低一个水准,目前博主试用的是:域控服务器--2核4G 数据库服务器(节点)--4核8G ) 2. SQL Serv ...

  8. 跨域漏洞丨JSONP和CORS跨域资源共享

    进入正文之前,我们先来解决个小问题,什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 跨域常见的两种方式,分别是JSONP和CORS. 今天i ...

  9. Window Server 2019 配置篇（1）- 创建域并把本机设置成域控制器

    由于这个学期的Window Server大作业是做一个服务器群,在域中创建包括DNS,DHCP,网关,更新服务器,hyper-v,自动部署等服务,所以我会把制作过程分步写在这个博客上 首先我们新建一个 ...

随机推荐

  1. java源码 -- AbstractSet

    AbstractSet抽象类属于Set集合分支的顶层类,它继承了AbstractCollection,实现了Set接口. public abstract class AbstractSet<E& ...

  2. MySQL安装与连接

    1.安装 下载地址:https://dev.mysql.com/downloads/mysql/ 常见问题及解决办法:https://blog.csdn.net/chen97_08/article/d ...

  3. centos7无网络环境下创建基于scratch镜像的Linux镜像，并带有Java运行环境

    一.准备 将下载好的jdk以及scratch镜像放在同一文件夹下:这里放在linux:2.0 二.导入scratch镜像 #docker load -i scratch.tar 三.创建dockerf ...

  4. 修改feign解析器替换json

    @Bean public Logger.Level getFeignLoggerLevel() { return Logger.Level.FULL ; } @Bean public Response ...

  5. （转）js-分享功能（qq,微信，微博）

    //1 分享QQ好友 function qq(title,url,pic)     {         var p = {             url: 'http://test.qicheyit ...

  6. 怎样在网页中嵌入JS代码

    有四种方法: 方法1: 在<script>标签内直接写代码 <body> <button id="btn">click</button&g ...

  7. VMware Workstation虚拟机安装

    VMware Workstation虚拟机安装 我们缺乏资金, 所以吃土.我们想搭 hadoop 集群, redis 集群, k8s 集群, 怎么办? 用虚拟机!! 一. 安装普通版本(Worksta ...

  8. 微软发布云端基因服务：推动AI驱动的精准医疗

    微软发布云端基因服务:推动AI驱动的精准医疗 2018年03月07日 00:00:00 微软研究院AI头条 阅读数:117    版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  9. Java中的ThreadLocal详解

    一.ThreadLocal简介 多线程访问同一个共享变量的时候容易出现并发问题,特别是多个线程对一个变量进行写入的时候,为了保证线程安全,一般使用者在访问共享变量的时候需要进行额外的同步措施才能保证线 ...

  10. 解决input获取焦点时底部菜单被顶上来问题

    <div class="search-box"> <input class="search-input" type="text&qu ...