前端面试题-网络请求-http请求方式-http状态码-url地址到浏览器渲染过程-跨域-请求测试工具-http和https_网络协议

前端面试题-网络请求-http请求方式-http状态码-url地址到浏览器渲染过程-跨域-请求测试工具

http请求方式
http的状态码有哪些？分别代表什么意思？
从输入一个url地址到浏览器完成渲染的整个过程
解决跨域的三种方式
请求测试工具-postman的使用
http和https

http请求方式

方式	描述
get	发送一个请求来取得服务器上的某一资源
post	向url指定的资源提交数据或者附加新数据
put	跟post方法很像，也是向服务器提交数据。但是它们之间有不同，put指定了资源在服务器上的位置.post却没有
head	只请求页面的首部
delete	删除服务器上的某种资源
options	用于获取当前url所支持的方法。如果请求成功，会有一个alow的的头包含类似’post.get’这样的信息

常用方式get请求和post请求的区别
get:从指定的资源请求提交数据，用于获取数据
post:向指定的资源提交要被处理的数据，用于将数据发送给服务器

	get	post
安全性	安全性较差不能用来传递敏感参数，因为它的参数是通过url传递的	相对安全参数放在request中
能否被缓存	会被缓存	不会缓存
收藏	可以被收藏为书签	不可以被收藏为书签
历史记录	保留在浏览器的历史记录中	不会保留在浏览器的历史记录中
长度	有请求长度限制	对数据长度没有要求
tcp数据包	产生1tcp数据包	产生2个tcp数据包

get和post本身都是tcp的连接，并无差别。但是由于http规定和浏览器/服务器的限制，导致它们在应用过程中体现出一些不同

http的状态码有哪些？分别代表什么意思？

状态码	描述
1xx:信息状态码
100 contiune	继续 post 已发送了http head 之后服务端将返回此信息，表示确认之后发送具体参数信息
2xx:成功状态码
200 ok	正常返回信息
201 created	请求成功并在服务器创建了新的资源
202 accepted	服务器已经接收请求但是尚未处理
3xx：重定向
301 moved permanently	请求的网页已经移动到了新的位置
302 found	临时重定向
303 see other	临时重定向，且总是使用get请求新的url
304 not modified	自从上次请求后，请求的网页没有修改过
4xx客户端错误
400 bad request	服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
401 unauthorized	请求未授权
403 forbidden	禁止访问
404 not found	找不到与url相匹配的资源
5xx服务器错误
500 internal server error	最常见的服务端错误
503 service unavailable	服务端暂时无法处理请求

从输入一个url地址到浏览器完成渲染的整个过程

1.浏览器地址输入url并回车
2.浏览器查找当前url是否存在缓存，并比较缓存是否过期
3.dns解析url对应的ip
4.根据ip建立tcp连接（三次握手）
5.发生http请求
6.服务器处理请求，浏览器接受http响应
7.浏览器解析并渲染页面
9.关闭tcp连接(四次握手）

解决跨域的三种方式

1.cros 服务端设置请求头

//设置响应头 设置允许跨域
  response.setheader('access-control-allow-origin','*')

2.利用script标签支持跨域的属性此方法需要服务端配合指定回调

<script>
    var body_=document.getelementsbytagname('body')[0];
    function search_(){
        var value_=q.value;
        if(value_.trim()==''){
            return;
        }
        var script_=document.createelement('script');//利用script标签之处跨域的属性
        script_.src='http://suggest.taobao.com/sug?code=utf-8&q=' + value_ + '&callback=cb';
        body_.appendchild(script_);
        console.log(script_);
    }
    function cb(res) {//回调函数
        console.log(res);
        // 数据渲染到页面
        var lis = ''
        for (var i = 0; i < res.result.length; i++) {
          lis += '<li>' + res.result[i][0] + '</li>'
        }
        console.log(lis)
        list.innerhtml = lis
      } 
</script>

3.代理服务器通过vue-cli实现配置vue.config.js文件

const { defineconfig } = require('@vue/cli-service')
module.exports = defineconfig({
  transpiledependencies: true,
  //开启代理服务器方式一方便简洁
  //缺陷一次只能配置一个 且先会去public中去找
  //如果pubblic中有就不会转发请求了 容易出现问题
  // devserver: {
  //   proxy: 'http://localhost:5000'
  // }
  //开启代理服务器2
  devserver: {
    proxy: {
      //请求前缀是谁 如果请求前缀符合 下面就继续走
      //请求前缀紧跟端口号 写在axios里
      '/quan': {
        //请求的目标服务器
        target: 'http://localhost:5000',
        //路径过滤 正则替换空
        pathrewrite:{'^/quan':''},
        //用于支持webscoket
        ws: true,
        //服务器骗不骗另一个服务器自己从哪里来
        changeorigin: true
      },
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  }
})