首页 > 其他分享 >CDN加速WordPress触发CORS导致跨域加载失败

CDN加速WordPress触发CORS导致跨域加载失败

时间:2022-11-24 21:01:16浏览次数:77  
标签:跨域 CDN org nginx 报错 CORS WordPress


这两天折腾​​CDN加速​​​来提升自己博客的访问速度,用的阿里云​​CDN加速​​方案;使用的时候发现一个问题,部分资源CDN加速失败,原因是触发了CORS,因为CDN加速网址与博客网址不一致引发的跨域请求不成功;

从报错中发现Off与Tff字体加载报错:

(index):1 Access to Font at 'http://cdn.5yun.org/wp-content/themes/yusi1.0/fonts/fontawesome-webfont.woff?v=4.1.0' from origin 'http://www.5yun.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.5yun.org' is therefore not allowed access.

既然报错,那就先了解一下CORS的原理:

CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。

WordPress触发CORS导致跨域加载失败的解决办法:

目前我用的是lnmp控制面板,对应站点的nginx配置文件在/usr/local/nginx/conf/vhost目录下

编辑www.5yun.org.conf当前站点配置文件,在合适位置加入以下代码



location ~* \.(ttf|woff)$ { add_header Access-Control-Allow-Origin *; }



配置保存完毕后,需要重启nginx服务器才能生效



/etc/init.d/nginx restart



然后ctrl+f5强制刷新一下,ttf与woff跨域加载报错的问题就消失了;

 

标签:跨域,CDN,org,nginx,报错,CORS,WordPress
From: https://blog.51cto.com/u_13991401/5884923

相关文章

  • 什么是前端跨域,怎么解决跨域问题
    什么是跨域?跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。所谓同源是指:域名,协议,端口均相同,不明白没关系,举个栗子:http://w......
  • 记录一次uniapp 开发环境访问本机接口 报跨域的问题
    api接口使用的springboot。已确认设置允许所有跨域请求(*)接口在本机启动(接口地址:http://localhost:9999)uniapp在本机启动(本地web:http://localhost:8080)报错信息:Acces......
  • 跨域请求
    同源策略ajax不能在不同源的情况下获取数据jsonp原理......
  • 关于乾坤加载子应用导致跨域?
    问题:加载百度地图sdk导致跨域由此联想到的问题,为什么乾坤可以劫持很多请求,子应用的js和css资源加载都会被拦截到?通常加载script的方式通过script标签通......
  • WordPress编辑器支持Word图文一键导入
    ​ ueditor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安......
  • wordpress 火车头发布模块
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>免登陆WordPress发布接口</title></head><body><p>最新版本或者意......
  • WordPress编辑器支持Word图片自动粘贴
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复......
  • WordPress编辑器支持PowerPoint粘贴
    ​如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-......
  • WordPress编辑器支持PowerPoint导入
    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,......
  • 解决在Vue3中html2canvas图片跨域问题
    <divv-html="transformImg(textContent.policyInterpretation)"class="topicContent"></div>consttransformImg=(str)=>{constreplaceCallback=(m,......