RequestHeaders添加自定義參數

在開發過程當中有的時候，參數須要綁定到requestHeaders中，而並非在body中進行傳輸。這個時候就須要咱們本身定義參數（須要後臺的配合）

  setToken() {
    let token = localStorage.getItem('token') ? localStorage.getItem('token') : ''
    this.instance.defaults.headers.common['tokens'] = token
  }
// 使用axios添加requestHeaders參數。封裝到ajax請求中~

問題一：在瀏覽器的console中報錯：自定義字段不被容許

Request header field 自定義字段 is not allowed by Access-Control-Allow-Headers

緣由：

包含自定義header字段的跨域請求，瀏覽器會先向服務器發送OPTIONS請求，探測該服務器是否容許自定義的跨域字段。

若是容許，則繼續實際的POST／GET正常請求，不然，返回標題所示錯誤。

同時在requestHeaders請求中有你定義的字段，但結果不是咱們想要的

在responseHeaders中Access-Control-Allow-Headers中表示服務器容許跨域請求的參數

Access-Control-Allow-Headers: Content-Type, x-requested-with, X-Custom-Header, Authorization,token

解決方案：

服務端須要對OPTIONS請求作出應答，應答header中包含Access-Control-Allow-Headers，且值包含options請求中Access-Control-Request-Headers的值。

如下爲java服務端filter中設置的OPTIONS請求處理代碼。

@Override
 
public void doFilter(ServletRequest req, ServletResponse resp,
        FilterChain chain) throws IOException, ServletException {
 
    try {
 
        HttpServletRequest hreq = (HttpServletRequest) req;
 
 
 
        HttpServletResponse hresp = (HttpServletResponse) resp;
 
        //跨域
        hresp.setHeader("Access-Control-Allow-Origin", "*");
 
 
        //跨域 Header
 
        hresp.setHeader("Access-Control-Allow-Methods", "*");
 
        hresp.setHeader("Access-Control-Allow-Headers", "Content-Type,TOKENS");　　// 在這裏配置你要定義的參數
 
        
 
        // 瀏覽器是會先發一次options請求，若是請求經過，則繼續發送正式的post請求
 
        // 配置options的請求返回
 
        if (hreq.getMethod().equals("OPTIONS")) {
 
            hresp.setStatus(HttpStatus.SC_OK);
 
            // hresp.setContentLength(0);
 
            hresp.getWriter().write("OPTIONS returns OK");
 
            return;
 
        }
 
        // Filter 只是鏈式處理，請求依然轉發到目的地址。
 
        chain.doFilter(req, resp);
 
    } catch (Exception e) {
 
        e.printStackTrace();
 
    }
 
}

其中，這個就是所需設置的應答Header：

hresp.setHeader("Access-Control-Allow-Headers", "Content-Type,TOKENS");

＊ header中對值的大小寫貌似不敏感。

參考博客：https://blog.csdn.net/xuedapeng/article/details/79076704