手记

has been blocked by CORS policy: Request header fiel...

一个需求中出现了这个问题,折腾了好几天。

背景:需求中接口要过网关,然后就出现了这个跨域的问题。
折腾好久没找到原因,研发,架构,it折腾一圈。

后来发现是接口要求传了自定义参数。浏览器在发送带有自定义的请求头时,浏览器会先向服务器发送OPTIONS预检请求,探测该请求服务端是否允许自定义跨域字段.如果允许,则继续执行请求,如果不允许,则返回错误信息提示错误。

cors的配置信息,其中有allowHeaders配置项,表示服务器支持的请求头信息字段,于是在默认的配置后面加上了在客户端自定义添加的yichehuoban-authkey字段,cors的配置就变成如下:

app.use(cors({
    origin: (ctx) => {
        return "*";
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'post', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept','yichehuoban-authkey'],
    AccessControlAllowHeaders: "*"

至此终于解决了。

0人推荐
随时随地看视频
慕课网APP