CML变色龙跨域请求错误的问题

关于跨域的问题此前写过两篇分别是关于服务端Apache的和PHP端的解决方法,解决跨域的问题可供参阅,本文仅针对CML变色龙的跨域开发问题。

CML变色龙跨域请求错误的问题

今天在本地使用变色龙做服务端通讯请求一直发现无法实现跨域,服务端我用的PHP,具体Header设置如下

header('Access-Contol-Allow-Credentials: true');
header('Access-Control-Allow-Origin: http://192.168.2.117:8000');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS');
header('Access-Control-Allow-Headers: *');

注意这里的设置很重要,如果Access-Contol-Allow-Credentials设置为true,那么Access-Control-Allow-Origin一定要指定具体的来源域,而不是*

另外Access-Control-Allow-MethodsAccess-Control-Allow-Headers也要注意,前者允许请求的Methods,考虑到可能会有PUT和DELETE等请求可以都放进去,后面是允许的类型,类似Content-Type,Authorization

服务端配置好了接下来搞客户端,在没有配置之前我反复会得到这个错误

Access to fetch at 'http://local.server/api/?do=output&format=json' from origin 'http://192.168.2.117:8000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.


GET http://local.server/api/?do=output&format=json net::ERR_FAILED

认真查看错误内容,其中这句

The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

然后我查看CML的官方文档在网络请求中有个setting参数,是这么描述的

默认值:{jsonp: false(仅 Web 端有效), apiPrefix: Boolean(根据传入 url 决定), credentials: 'include'(仅 Web 端有效)}

说明:自定义了设置,apiPrefix 为是否添加 chameleon.config.js 中设置的 apiPrefix (以http://或https://或//开头的url默认不会拼接, 其他情况均会自动拼接); jsonp 为 true 时会发起一个 jsonp 请求; credentials 可选值'omit'/'same-origin'/'include', 对应 fetch 的 credentials

fetch控制Credentials的三个参数选项及含义

  • credentials: 'include' //请求时携带凭证
  • credentials: 'same-origin' //仅在同源时请求时携带凭证:(浏览器默认值,在旧版本浏览器,例如safari 11依旧是omit,safari 12已更改)
  • credentials: 'omit' //不在请求中包含凭证

于是把setting的默认值改为

setting: {
      credentials: 'omit'
    }

再次运行发现没问题了。

Post Comment