> >

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

后端开发Node.js 149

最近更新：这个项目有一年之久没有commit了，坑太多，已放弃！

关于跨域的问题此前写过两篇分别是关于服务端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-Methods和Access-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