AJAX出现两次请求 options和get|post

• 跨域请求
• 允许跨域请求
• preflighted request预请求（options）

跨域请求

XMLHttpRequest会遵守同源策略(same-origin policy). 即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。

允许跨域设置

两种方法都可以设置允许跨域。

• Nginx服务器设置

  location / {  
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT';
      add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  } 
  

• 后端服务器设置

  var corsHeaders = map[string]string{
    "Access-Control-Allow-Headers":  "Accept, Authorization, Content-Type, Origin,X-Token",
    "Access-Control-Allow-Methods":  "GET, DELETE, OPTIONS, PUT",
    "Access-Control-Allow-Origin":   "*",
    "Access-Control-Expose-Headers": "Date",
    "Cache-Control":                 "no-cache, no-store, must-revalidate",
  }
  
  func setCORS(w http.ResponseWriter) {
    for h, v := range corsHeaders {
        w.Header().Set(h, v)
    }
  }
  
  在后端服务器response时设置header运行跨域。
  

  除此之外，浏览器会发送一种预请求preflighted request 在真正发送请求前，发送一个方法为OPTIONS的预请求，用于试探性服务端是否真正接受真正请求。如果options请求获得回应是非正常的2xx、3xx，则会停止post、put请求发送。

什么情况下发送预请求preflighted request？

1. 请求方法不是GET、HEAD、POST
2. CORS规定POST请求的Content-Type并非application/x-www-form-urlencoded、multipart/form-data、text/plain
3. 请求设置了自定义header字段

参考

AJAX中出现两次请求，OPTIONS请求和GET请求 - CSDN
Nginx配置跨域请求 - segmenfault