http跨域

CORS

1.简单请求 get post head

2.预检请求 put delete等

非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为 预检请求

本地5173的端口向5170的端口发送了一个CORS 的put请求 会先自动发一个预检请求。

这个预检请求是options类型的， Access-Control-Request-Method 表示实际请求将使用的方法是PUT类型

服务端通过了 预检请求，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样，会有一个 Origin 头信息字段。服务器的回应，也都会有一个 Access-Control-Allow-Origin 头信息字段 （上图蓝色部分 允许跨域的请求方法 允许跨域访问的host 全都都设置的*）

3.有的面试会问 明明我只发送了一次post请求，但是在network显示了两条

其实post请求也可以作为预检请求。

那我们明确定义一下简单请求吧

（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
  

上图我的post请求 headers中设置了Content-Type:application/json; charset=UTF-8 果然也发送了一次预检请求

注意： 由于我第一次写只单单设置了Content-Type,并没有写请求体。发现并没有如预期发出预检请求。

咨询chatgpt：如果你不发送请求体（即data为空），那么浏览器在发送请求时可能不会显示Content-Type属性。这是因为，当你没有提供请求体时，浏览器会自动将Content-Type设置为application/x-www-form-urlencoded，这是HTML表单默认的媒体类型。

4.解决跨域问题

本地服务开启代理 vue-cli（devserver）/vite（server ）的 proxy

node.js 中server设置 Access-Control-Allow-Origin

nginx nginx.conf 中设置 Access-Control-Allow-Origin

JSONP JSONP只支持GET请求

function handleResponse(data) {
  // 处理从服务器返回的数据
}

var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);

5.补充下http请求状态码，headers