专栏首页carven前端小积累

前端小积累

一周周实习,很少时间写博客了,但本周的实习中,遇到了一些问题,可以说是争长了阅历,所以一定要好好记下来。 遇到的问题主要是关于跨域css3的;

下面我们探讨一下跨域问题,还是css3下的translate会导致显示模糊的问题。

跨域

跨域的方式其实挺多,有jsonpCORSiframe等,详细的可以去google; 但其实常用的还是jsonpCORS

这周在做一个功能,但是做得东西因为前端和后台接口不在同一个域名下,需要用到跨域; 当时导师要我确立一个跨域方法,我疾呼没想多久,就定下了jsonp,因为这个方案对前端和后台来说,都是实现成本较低的。 于是问题就出现了。

jsonp

jsonp的实现原理,做前端的应该都知道。 前端工作

<script>
function deal(data){
    //处理data
}
</script>
<script src="http://api.zjy.space/do?callback=deal"></script>

后台工作 假设PHP

...//计算接口数据$data
$callback=$_GET["callback"];
echo $callback."(".$data.")";

把上面串联起来,当前端调用<script src="http://api.zjy.space/do?callback=deal"></script>的时候,其实就相当于执行了deal(data)

这就是jsonp的简略理解。 但是,我们发ajax请求的时候,常用的库是JQuery$.ajax库,它将jsonp和其他的GET,POST一起封装起来,使人很容易忽略他的真正实现过程,一些很关键的东西很容易忽略起来。

$.ajax({
    url: "ttp://api.zjy.space/do",
    dataType: "jsonp",
    success: function(data){
        //处理data
    },
    error: function(err){
        //处理err
    }
})

jsonp的容易忽略的坑

  • 针对上面$.ajax的写法,如果我要通过jsonp发送POST请求呢? 熟悉jquery的同学可能很快就写下来了。 $.ajax({ url: "ttp://api.zjy.space/do", type: "POST", dataType: "jsonp", success: function(data){ //处理data }, error: function(err){ //处理err } }) 错! 想想上面的jsonp实现方法(src请求资源),怎么可能发出post请求
  • 如果我要通过jsonp发送一些特定的headers呢? 熟悉jquery的同学可能很快就写下来了。 $.ajax({ url: "ttp://api.zjy.space/do", dataType: "jsonp", headers:{ "my-name":"carven" }, success: function(data){ //处理data }, error: function(err){ //处理err } }) 错! 想想上面的jsonp实现方法(src请求资源),怎么可能可以修改headers信息

CORS

恰巧,我们的跨域需要post和headers,所以jsonp方案被否定了,而且还存在跨域问题。 于是,我们转头去选择CORS方案。 由于我们需要发送自定义头信息,所以,我们需要实现的是非简单类型的CORS,即发送真正请求前,需要发送一次预检请求,协商好真正请求的请求方式、允许的headers等等; 当然,这些的后台要做的工作,对前端来说,这是无感知的;

接口在后台导师的努力下,修改完成,但是我在做交互调试的过程中出现了问题,原来,接口之间使用了session作为信息交流的手段,大家也知道,session是依赖于cookie的; 而CORS请求的其中一个特点就是,不会自动发送cookie,如果前端对cookie的概念不深刻的话(我也学过后台),是很容易忽略这一点的。

如何使CORS请求携带cookie呢。方式其实很简单,这个需要前端和后台一起协作。

  • 前端使请求携带cookie... xhr.withCredentials = true; 或者 $.ajax$.ajax({ url: "ttp://api.zjy.space/do", xhrFields: { withCredentials: true }, ... })
  • 后台允许请求携带cookie 假设PHPheader("Access-Control-Allow-Credentials:true"); ...

这样就成功啦。

CSS3之translate导致的模糊

现在大部分浏览器都已经支持css了,特别是translate这些常用的属性; 比如垂直水平居中的实现

.vertical-center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

但是,在使用translate的情况下,可能会出现模糊的情况。是怎么回事呢。

我假设目前有一个div盒子的宽度是299px, 那么translate(-50%, -50%)就相当于translate(-149.5px, 149.5px), 然而,1px其实已经是最低的显示单位了,如果强行处理0.5px的像素,显示器该如何显示呢? 所以,小数点后面的像素就会缺失,造成一种显示涣散、模糊的感觉。

网上有说通过设置父元素

transform-style: preserve-3d;

我尝试了,没有得到解决,也不懂其中原理。

如果有人知道怎么决解这一个问题,欢迎联系我,或者在下面评论哦。

结尾

这一周的实习收获让我很开心。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cors跨域探讨

    前端跨域方案很多,jsonp、iframe等等,但是个人觉得,最正宗,最无损的跨域方式还是CORS。 CORS(Cross-origin resource sh...

    用户1394570
  • 利用canvas实现毛笔字帖(一)

    最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列ca...

    用户1394570
  • win7 安装 mac虚拟机

      一周前社团ios方向刚完成招新,图新鲜的我也试装了一下虚拟机。自己装的时候是按教程来的,很轻松就装成了。 ios的经理见我装的那么溜,就把几个需要装虚拟机的...

    用户1394570
  • [教程]系统漏洞渗透

    Youngxj
  • 构建具有用户身份认证的 Ionic 应用

    使用 Okta 和 OpenID Connect (OIDC),可以很轻松的在 Ionic 应用中添加身份认证,完全不需要自己实现。 OIDC 允许你直接使用 ...

    叙帝利
  • 责任链模式

    概述 概念:责任链模式是一种对象的行为模式。在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链。请求在这个链上传递,直到链上的某一个对象决定...

    xiangzhihong
  • 构建具有用户身份认证的 Ionic 应用

    叙帝利
  • 自己写一个Raw方法

    另一种情况也是如果。在一般处理程序中的匿名类中传递的参数也是一个字符串的话, 在cshtml中的model调用该参数的时候,也会发生字符串被转义的现象,见下图:

    静心物语313
  • Object family not exist issue in Equipment download

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • C++ OpenCV图像亮度和对比度操作

    新建一个项目opencv-0007,配置属性(VS2017配置OpenCV通用属性),然后在源文件写入#include和main方法.并加载我们常用的那个图片显...

    Vaccae

扫码关注云+社区

领取腾讯云代金券