人生苦短，了解一下前端必须明白的http知识点

半年了，没有在个人的文章发表任何话题，可能是被喷的多了，也可能是累了，以前的分享都是以边学边写的模式做出的文章，当时也是因为VUE的热点写了一堆看似现在纯小白学的东西。但是言归正传，继续分享我自己所学到的http对于前端需要了解的知识点。

对于http的报文格式就不多细说了，因为做为前端开发，我们需要知道前后端联调时的请求和响应之间请求头和返回头之间的关系和每个字段中的涵意，静态文件资源在加载时我们所观察到可性能优化的点，和一些日常请求报错如何去解决的坑，更重要的是面试的时候如何去从容的应对面试官

以下的讲解纯属于个人理解，肯定会有错误和理解不到位的点，请在下方用你们猿族的语言喷起来

简单跨域的解决方式

跨域是一个老生常谈的话题，面试官问我如何解决跨域，以前只会和面试官说用webpack的proxy做代理，叫后端大哥给我本地启一个nginx就可以了，那往往在一些特殊的情况下，后端大哥来大姨妈了，进入一个新公司的让你维护一个很老的项目，并没有用到工程化这些东西，而且后端又来了一位新的高不高，低不低的后端工程师，此时对跨域根本性的知识点了解才能解决根本性的问题。

猿族前端 VS 猿族后端java

后端说: 前端同志，我们先调一个get请求的一个接口，地址我给你，http:www.pilishou.com/getname/list

前端操作中。。。

fetch('http://http:www.pilishou.com/getname/list', {method: 'GET'
}) 

写了一个这样的请求，听从后端大哥向服务端发送，此时浏览器报了一个这样的错误Failed to load http://http:www.pilishou.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

小白前端会说: 大哥，你这是什么接口，请求了还尼妈报错，你那里什么鬼！

大牛前端会说: 大哥，帮个忙，你那里忘记设跨域头了。

小白后端会说：大哥，丢你老母啊，你会不会调接口，报错还找我，我这里postman上面调的一点问题都没有

大牛后端会说: 大哥，等一下，我的跨域头忘记设了，稍等

原理讲解:

在本地向不同域请求的时候，浏览器会做一个Origin请求头的验证，如果没有设置，在不同域名下或者本地请求时浏览器会向服务端发送请求，服务端也会客户端发送对应的值，但是浏览器考虑到安全策略，会进行一个关于头信息的报错，此时对于后端来说，需要在response的返回头中加入'Access-Control-Allow-Origin': '*',来告诉浏览器我允许你进行一个跨域请求，不用报错，把值返回给请求者，这样你就可以安然的拿到数据。同时这样也会导致任何一个域名发送过来的请求，都允许跨域的情况下，可以针对'Access-Control-Allow-Origin': '此处设置指定的域名'

复杂跨域的解决方式

此时前端唱起来一首抖音网红歌，我知道我对你不仅仅是喜欢！。。。。。

后端说：小伙，这里有一个接口，需要遵循resutful接口，用PUT方法，·http:www.pilishou.com/getname/update

前端操作中。。。。

fetch('http://http:www.pilishou.com/getname/list', {method: 'PUT'
}) 

继续按部就班的写了一个这样的请求，然后又发现浏览器报了这样一个错误Failed to load http://http:www.pilishou.com: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response

小白前端会说: 大哥，你接口又怎么了，GET，POST都行，PUT怎么不行，肯定是你的问题，我别的什么都没动啊。

大牛前端会说: 大哥，帮个忙，你把请求头中加一些允许跨域的方法。

小白后端会说：大哥，丢你老母啊，你不会调接口，报错还找我，我这次postman上面调的还是一点问题都没有

大牛后端会说: 大哥，等一下，我加一些允许跨域的方法，稍等

原理讲解:

在简单的跨域请求中
1.请求方法是以下三种方法之一：
HEAD
GET
POST
2.HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain 

如果不超过以上的限制,后端则只需要提供一个允许跨域的Origin就可以了，如果在请求方法超过了以上三种，需要添加'Access-Control-Allow-Methods': 'PUT',同样浏览器为了安全，不允其它请求方法在台端没有设置允许的方法中进行一个跨域请求

同理复杂请求还包函着别的需要后端设置允许一些跨域请求的方式，比如通常会出现的:

• 添加自定义头

fetch('http://127.0.0.1:8887', {method: 'PUT',headers: {'x-header-f': '1234',}})