charles解决跨域问题

时间:2024-03-16 12:14:42

OPTIONS请求

这篇文章讲的比较详细,具体可查看跨域资源共享 CORS 详解
这里简单介绍一下:
OPTIONS请求是非简单请求的一种处理方式。在真正发送请求之前,增加一次HTTP查询请求,称为"预检"请求(preflight),就是我们刚刚说到的参数为OPTIONS的第一次请求,它的作用是:询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP请求和头信息字段。只有得到肯定答复,浏览器才会发出正式的HttpRequest(GET、POST等)第二次请求;否则就报错,也不会进行第二次请求

不依赖服务端解决跨域问题

一般跨域的解决依赖于服务器配置,有时候会出现服务器虽然已经支持跨域,但是options请求仍返回404 not found,对下不关注这个请求的同学来说,解决这个问题比较浪费时间。如下方法不依赖服务端,通过charles rewrite功能,将options请求修改为成功:

正常OPTIONS请求的response header

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Accept,Origin,X-Requested-With,Content-Type,Last-Modified
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH

rewrite修改options请求的response header

  1. Tools --> Rewrite
  2. 添加rewrite配置
    charles解决跨域问题
    charles解决跨域问题