加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

HTTP基本知识、跨域和调试技巧

发布时间:2019-04-17 03:20:39 所属栏目:优化 来源:SmartCoder
导读:副标题#e# HTTP基础 其实很多面试问HTTP的3次握手,4次挥手,我觉得价值不大,可以帮助你理解HTTP的原理,死背硬记的对于你开发没有作用,而是去理解它就行。 前端只关心URL、headers和data,接下来也围绕着它们展开。 了解HTTP请求可以看看:https://devel
副标题[/!--empirenews.page--]

 HTTP基本知识、跨域和调试技巧

HTTP基础

其实很多面试问HTTP的3次握手,4次挥手,我觉得价值不大,可以帮助你理解HTTP的原理,死背硬记的对于你开发没有作用,而是去理解它就行。

前端只关心URL、headers和data,接下来也围绕着它们展开。

了解HTTP请求可以看看:https://developer.mozilla.org...

1.了解URL

URL比较简单,就简单介绍一下,将URL分为主要的3部分:

 1.  router,路由。路由地址可不能错,这就跟收件地址一样,填错收货的就不是既定的那个人了。

 2.   search,查询字符串,就是?后面的字符串,以键值对的形式通过“&”连接,例如:“?key1=value1&key2=value2”。查询字符串就是发送到后台的数据,跟普通的post请求相比,get请求以明文的形式存储在访问历史,浏览器和路由器都很容易查得到,容易泄露,所以不建议用get请求;其次一般浏览器都有限制URL的长度,所以不适合发送大数据量的数据。

 3.   hash,哈希值或者称为锚,是#后面的字符串,一般作为单页应用的路由地址,或者文档的锚。

2.前端常用的headers

2.1.Content-Type(重要)

告诉客户端,用什么形式前端的数据发送到后台:application/x-www-form-urlencoded、multipart/form-data、text/plain等。

2.2 application/x-www-form-urlencoded

最常见的方式以键值对的字符串传输(类似URL的search),但不能传输文件,几乎所有的ajax框架都是默认以此种方式发送。

发送到后台的数据见下图:

2.3 multipart/form-data

这种方式会以键值对的形式通过分隔符链接,以字符串给后台,可以传输文件,也可以传输普通数据。

常用场景:

  1. // 源生的form提交可设置enctype="multipart/form-data",一般表单中有文件会自动设为该值  
  2. <form action="post" enctype="multipart/form-data"></form>  
  3. // ajax请求,通过formdata对象来达成此目的  
  4. const formdata = new new FormData();  
  5. formdata.append("key","value")  
  6. $.ajax({  
  7. ...  
  8. data: formdata,  
  9. processData: false,    // 取消对数据的预处理,因为formdata不需要预处理  
  10. headers: {  
  11.    "Content-Type": undefined    // 客户端会自动给它设置正确的值,不要设为multipart/form-data,这样设的后果会导致分隔符不正确  
  12. },  
  13. ...  
  14. }) 

如果在抓包确认划线的一致的话就是正确发送过去了。

2.4text/plain

这个很少会用到了,普通文本,可以是任意数据,除了文件。

2.5binary

二进制流,仅限一个文件。

3 Data-Type

告诉后台你希望返回什么类型的数据,如xml,html,script,json,jsonp,text等,或者你跟后台约定的也可。但是实际返回的并非跟预期一致,还是由后台决定的。

4 自定义header

如果跟后台有约定header,如token等,也可传到后台。

  1. headers["token"] = "MD5KEY"; 

CORS跨域

跨域问题的根本问题就是同源策略,旨在防止网站被攻击,这里不做赘述。

CORS是后台的工作,但前端工程师还是要了解CORS,这样才有后台抬杠的资本。以下是后台response配置CORS的headers,如果后台不懂,请让他了解了解CORS。

Access-Control-Allow-Origin

简单说,允许跨域访问的host,必须设置,否则不允许跨域。

  1. // 如需允许所有资源都可以访问您的资源,您可以如此设置:  
  2. Access-Control-Allow-Origin: *  
  3. // 如需允许https://developer.mozilla.org访问您的资源,您可以设置:  
  4. Access-Control-Allow-Origin: https://developer.mozilla.org 

Access-Control-Allow-Credentials

如果想跨域传输cookies,需要Access-Control-Allow-Credentials与XMLHttpRequest.withCredentials 或Fetch API中的Request() 构造器中的credentials 选项结合使用。Credentials必须在前后端都被配置(即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置)才能使带credentials的CORS请求成功。

Access-Control-Request-Method

允许跨域的请求的方法。

  1. Access-Control-Allow-Methods: POST, GET, OPTIONS 

Access-Control-Allow-Headers

(编辑:PHP编程网 - 黄冈站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读