易语言添加请求头

易语言添加请求头，解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。

1.第一步 服务端设置响应头

header(‘Access-Control-Allow-Origin:*’)//支持全域名访问，不安全，部署后需要固定限制为客户Duan网址

header(‘Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE’)//支持的http 动作

header(‘Access-Control-Allow-Headers:x-requested-with,content-type’)//响应头 请按照自己需求添加。

2.第二部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 “预请求” 就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！

A 第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。（能看到这份手稿的人，本人不相信你后台处理不了一个options请求）

B 第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。此时 大多数人 会发现请求成功了，但是 有那么几个人会发现 请求成功了但是没有任何信息返回 why？因为你自定义的请求头在服务器响应中不存在！

查看console输出 会发现一个问题：

“Access-Control-Allow-Headers 列表中不存在请求标头 XXXXXX”【IE】，

request header field xxxxxx is not allowed by Access-Control-Allow-Header【chrome】

这是因为 你的XXXX请求头 没有在服务器端被允许哦~

遇到这个问题 只有通过修改服务器端来完成。

项目之前传递token的方式，是通过cookie来传的。（cookie中的数据默认会跟着所有请求发送）因谷歌浏览器80版本之后，SameSite属性默认值改为Lax后，导致不同站下的cookie写不进去了。所以更改了传递token的方式，通过请求头传递。设置了axios的请求头后，其他的接口访问都没有问题，唯有图片这种直接通过src或者background:url()的方式。接口就加载请求了，加不上请求头。

使用原生的XMLHttpRequest对象创建请求

注：

URL.createObjectURL()

URL.revokeObjectURL()

参考： https://segmentfault.com/a/1190000020366227?utm_source=tag-newest

现代 Web 应用中频繁使用的一项功能就是表单数据序列化，XMLHttpRequest 2 级为此定义了 FormData 类型，FormData 为序列化表单以及创建与表单格式相同的数据（通过 JS 来模拟表单键值对）提供了便利。

使用 post 发送表单键值对格式的请求时，依然可以使用查询字符串格式，只是要放在请求体中，即传入 send() 中，介绍以下几种方法：

方法1： 直接模仿表单提交的形式，缺点是需要手动设置请求头，还要自己序列化为查询字符串的形式传给 xhr 对象。

方法2： 使用 FormData() 构造函数，浏览器会自动识别并添加请求头 "Content-Type: multipart/form-data"，且参数依然像是表单提交时的那种键值对儿，此外 FormData() 构造函数 new 时可以直接传入 form 表单的 dom 节点。

方法3： 使用 URLSearchParams() 构造函数传入查询字符串，返回的实例和 FormData 相似，同时浏览器也做出相同的行为。

另外，URLSearchParams() 构造函数 new 时可以直接传入查询字符串格式的参数，比如：

可见 send() 方法很灵活：

第一行是请求行，指明了方法、URI 和 HTTP 版本号；

接着是消息头（简单起见，只有一个 Content-Type)；

然后空出一行；

接下来就是消息体，可以看到使用 multipart/form-data 时，消息体通过 boundary 来分隔多个字段，被分隔的每个字段都有自己的小头部和小消息体，且也用空行分隔。如此，提供了额外的信息。

字段的值可能是普通的字符，也可能是二进制文件：

multipart/form-data 最初由 《RFC 1867: Form-based File Upload in HTML》 文档定义。

文档简介中说明文件上传作为一种常见的需求，在目前(1995年)的html中的form表单格式中还不支持，因此发明了一种兼容此需求的MIME type。

文档中也写了为什么要新增一个类型，而不使用旧有的 application/x-www-form-urlencoded ：因为旧有类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以 multipart/form-data 就诞生了，专门用于有效的传输文件。

参考：

1. 豆瓣：JavaScript高级程序设计（第3版）

2. MDN： FormData

3. MDN: XMLHttpRequest.send()

4. 为什么上传文件要使用multipart/form-data

5. 谈谈form-data请求格式

---