Dragon

Cloudflare 网站设置跨域规则 cloudflare 跨域错误设置

2023-03-02 16:35 1,092 抢沙发 阿峰博客

背景

最近给一个 API 接口加了 Cloudflare,但是发现在主域调用 api 接口(接口是子域),浏览器会报跨域错误,找了半天在规则发现可以使用转换规则实现添加 header。

Cloudflare 网站设置跨域规则 cloudflare 跨域错误设置插图

开始

打开cloudflare进入网站设置控制台,找到左侧菜单栏的规则>转换规则,选择修改响应头选项卡,点击创建规则按钮

Cloudflare 网站设置跨域规则 cloudflare 跨域错误设置插图1

如下设置。选择自定义筛选表达式,如果需要对全站都设置跨域规则,字段选择主机名,运算符选择等于,值填写您的域名,如果需要允许全部域名则填写*。

点击设置新标头,选择设置静态,标头名称输入:Access-Control-Allow-Origin,值输入带协议头的域名,同时需要设置 HTTP 方法,标头名称输入:Access-Control-Allow-Methods,值根据需要输入,如:GET,POST,OPTIONS。

有的网站可能还需要设置 Access-Control-Allow-Credentials,允许发送 cookie,具体可根据网站实际情况添加 header。

Cloudflare 网站设置跨域规则 cloudflare 跨域错误设置插图2

如果需要对指定的 API URL 设置跨域规则,可参考如下设置

Cloudflare 网站设置跨域规则 cloudflare 跨域错误设置插图3

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

阿峰博客给阿峰博客打赏
×
予人玫瑰,手有余香
  • 1
  • 5
  • 10
  • 20
  • 50
1
支付

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

2023-01-25

2023-03-07

发表评论