用 whistle 解决跨域请求问题

14,067 阅读2分钟

cors error
在访问本地或测试环境如果出现上述跨域问题,可以用 whistleresCors 处理,有以下三种解决方式:

  1. 通配符
  2. 自动设置
  3. 自定义

建议大家把 whistle 升级到 v2.5.3 及以上版本,否则前两种方式在处理 OPTIONS 请求会有问题。

有关 whistle 参见 Github:github.com/avwo/whistl…

通配符

一般用于无需登录态的跨域请求,或者 crossorigin 属性设置为空或 anonymousscript 标签(如: <script crossorigin src="..."></script>,一般都设置为默认值 anonymous),可配如下规则解决:

pattern resCors://*

pattern 可以为域名、路径、通配符、正则等,详细内容参见:wproxy.org/whistle/pat…

例如(用 whistle 的 Composer 模拟请求):

www.qq.com/test resCors://*

resCors://*

自动设置

一般用于需要登录且无人为特别限制的跨域请求,或者 crossorigin 属性设置为 use-credentialsscript 标签(如: <script crossorigin="use-credentials " src="..."></script>),可配如下规则解决:

pattern resCors://enable # 或 pattern resCors://use-credentials

pattern 可以为域名、路径、通配符、正则等,详细内容参见:wproxy.org/whistle/pat…

例如(用 whistle 的 Composer 模拟请求):

www.qq.com/test resCors://enable

resCors://enable

自定义

自定义方式可以完全根据自己的需要设置响应的 cors 头,一般用于对请求有特殊限制的情形,比如只允许某些请求方法或自定义请求头访问等等,具体配置方式如下:

pattern resCors://(origin=xx&mehods=POST&headers=x-test)

pattern 可以为域名、路径、通配符、正则等,详细内容参见:wproxy.org/whistle/pat…

例如(用 whistle 的 Composer 模拟请求):

``` test-cors1
origin: *
methods: POST
headers: x-test
credentials: true
maxAge: 300000
```
www.qq.com/test resCors://{test-cors1}

resCors://自定义

一般如果是静态资源设置 resCors://* 即可,CGI请求的话可以设置 resCors://enable,如果是对请求响应的cors头有特殊要求再用自定义方式,更多内容参见帮助文档:wproxy.org/whistle/rul…