7.Ajax 设置请求头

请求头设置用 setRequestHeader() 方法

在 open 步骤以后就可以使用这个方法去设置请求头

 xhr.open("POST", "http://127.0.0.1:8000/server");
  // 设置请求头 Content-Type 值为application/x-www-form-urlencoded
  // Content-Type 是设置请求体内容的类型的，application/x-www-form-urlencoded 就是参数 a=1&b=2 的类型
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("a=1&b=2");

 案例：

    const result = document.querySelector("#result");
    result.addEventListener("mouseover", () => {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "http://127.0.0.1:8000/server");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send("a=1&b=2");
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            // 设置 result 的文本
            result.innerHTML = xhr.response;
          }
        }
      };
    });

不设置这个请求头的话，是下面这样的

---

也可以自定义请求头

  xhr.setRequestHeader("name", "yujiabao");

但是会报错

是因为这个name是我们自定义的请求头，不是预定义的，像Content-Type就是预定义的 ，如果需要实现自定义的响应头，那么需要加一个特殊的响应头

  // 为了实现自定义请求头，表示所有所有类型的头信息都可以接收
  response.setHeader("Access-Control-Allow-Headers", "*");

// 1.引入 express
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.get('/server', (request, response) => {
  // 设置响应头 Access-Control-Allow-Origin，值为 *，目的是为了允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 设置响应体
  response.send('HELLO AJAX')
})
// 添加 post 规则
app.post('/server', (request, response) => {
  // 设置响应头 Access-Control-Allow-Origin，值为 *，目的是为了允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 为了实现自定义请求头，表示所有所有类型的头信息都可以接收
  response.setHeader('Access-Control-Allow-Headers', '*')
  // 设置响应体
  response.send('HELLO AJAX POST')
})

// 4.监听端口启动服务
app.listen(8000, () => {
  console.log('服务已经启动，端口号是8000....');
})

这样还不能实现，是因为我们发送的时候还会给服务器发送一个 option 类型的请求，也就是预检请求，校验这个头信息可用不可用

这个OPTON请求因为在服务器中得不到对应的结果，所以就会报错，此时我们把服务器文件中的post路由规则改为all就行了

// 1.引入 express
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.get('/server', (request, response) => {
  // 设置响应头 Access-Control-Allow-Origin，值为 *，目的是为了允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 设置响应体
  response.send('HELLO AJAX')
})
// 任意类型的路由规则，就是无论是get，post，delete还是option等等都可以接收
app.all('/server', (request, response) => {
  // 设置响应头 Access-Control-Allow-Origin，值为 *，目的是为了允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 为了实现自定义请求头，表示所有所有类型的头信息都可以接收
  response.setHeader('Access-Control-Allow-Headers', '*')
  // 设置响应体
  response.send('HELLO AJAX POST')
})

// 4.监听端口启动服务
app.listen(8000, () => {
  console.log('服务已经启动，端口号是8000....');
})