CORS error错误 has been blocked by CORS policy前端请求浏览器出错_我服务器放在本地 ,请求接口报cors error.前端怎么解决

问题简述

通过vue的axious拦截全局请求在请求头上加了identify和token字段后，访问后端zuul网关，浏览器出现错误，导致后台接收不了http包的自定义header字段，并不能很好的进行网关的鉴权。
错误如下:
Access to XMLHttpRequest at ‘http://127.0.0.1:27000/api/v1/index-infos’ from origin ‘http://’ has been blocked by CORS policy: Request header field identify is not allowed by Access-Control-Allow-Headers in preflight response.
网络和控制台错误如下图：

出错分析

后台是做了跨域的，在header中增加了一个字段就出现错误。在 CORS 中，会使用 OPTIONS 方法发起一个预检请求(一般都是浏览检测到请求跨域时，会自动发起)，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法。
Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。服务器所返回的 Access-Control-Allow-Methods 首部字段将所有允许的请求方法告知客户端。
总结起来就是：浏览器在发送带有自定义的请求头时,浏览器会先向服务器发送OPTIONS预检请求,探测该请求服务端是否允许自定义跨域字段.如果允许,则继续执行请求,如果不允许,则返回错误信息提示错误。

解决方法

在跨域请求头中添加相应的允许字段，在Access-Control-Allow-Headers字段中添加自己自定义的字段，请求就可以访问了，zuul中的拦截代码：

@Override
    public Object run() throws ZuulException {
        RequestContext ctx = RequestContext.getCurrentContext();
        HttpServletRequest request = ctx.getRequest();
        HttpServletResponse response = ctx.getResponse();

        // 这些是对请求头的匹配
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Access-Control-Allow-Methods","GET, HEAD, POST, PUT, DELETE, OPTIONS, PATCH");
        // 这行代码添加相应的的允许字段
        response.setHeader("Access-Control-Allow-Headers","authorization, content-type,token,identify");
        response.setHeader("Access-Control-Expose-Headers","X-forwared-port, X-forwarded-host");
        response.setHeader("Vary","Origin,Access-Control-Request-Method,Access-Control-Request-Headers");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())){
            ctx.setSendZuulResponse(false); 
            ctx.setResponseStatusCode(HttpStatus.OK.value());
            ctx.set("isSuccess", true);
            return null;
        }
        ctx.setSendZuulResponse(true); 
        ctx.setResponseStatusCode(HttpStatus.OK.value());
        ctx.set("isSuccess", true);
        return null;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26