nginx 处理ios请求跨域Error: Network Error

本文介绍了如何在Nginx中配置以支持iOS设备发起的跨域请求,包括预检请求的缓存、CORS策略设置,确保安全地处理OPTIONS请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ios请求会自带预检,需要在nginx中加入如下代码
location / {

  #以下为新增配置
  #   预检命令的缓存,如果不缓存每次会发送两次请求
  add_header Access-Control-Max-Age 3600;
  #   带cookie请求需要加上这个字段,并设置为true
  add_header Access-Control-Allow-Credentials true;
  #   表示允许这个域跨域调用(客户端发送请求的域名和端口)
  #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
  add_header Access-Control-Allow-Origin $http_origin;
 # 请求方式*表示全部支持
  add_header 'Access-Control-Allow-Methods' '*';
  #   表示请求头的字段 动态获取
  add_header Access-Control-Allow-Headers $http_access_control_request_headers;
  #   OPTIONS预检命令,预检命令通过时才发送请求
  #   检查请求的类型是不是预检命令
  if ($request_method = OPTIONS){
      return 200;
  }

}
<template> <view> <canvas canvas-id="myCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" ></canvas> <button @click="drawWithCustomFont">绘制文字</button> </view> </template> <script> export default { data() { return { canvasWidth: 300, canvasHeight: 300, fontLoaded: false } }, methods: { async drawWithCustomFont() { if (!this.fontLoaded) { await this.loadFont('kaiti', 'https://yinzhang.jinshelby.com/xcx/font/kaiti2.ttf'); } // 统一使用标准API绘制 this.drawText(); }, async loadFont(fontName, fontUrl) { return new Promise((resolve, reject) => { // 环境检测 const isWechat = typeof wx !== 'undefined'; const isH5 = typeof window !== 'undefined'; if (isH5) { // H5平台处理 const fontFace = new FontFace(fontName, `url(${fontUrl})`); fontFace.load().then(() => { document.fonts.add(fontFace); this.fontLoaded = true; resolve(); }).catch(reject); } else if (isWechat) { // 小程序平台处理 wx.loadFontFace({ family: fontName, source: `url("${fontUrl}")`, success: () => { this.fontLoaded = true; resolve(); }, fail: (err) => { console.error('微信字体加载失败:', err); reject(err); } }); } else { resolve(); // 其他平台跳过 } }); }, drawText() { const ctx = uni.createCanvasContext('myCanvas', this); // 清除画布 ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); // 标准字体设置(所有平台通用) ctx.font = 'normal 20px "kaiti"'; ctx.fillStyle = '#000'; // 绘制文字 ctx.fillText('你好,世界!', 50, 50); // 统一绘制 ctx.draw(false, () => { console.log('绘制完成'); }); } } } </script> 小程序ios真机 字体没变 安卓真机 提示 loadFontFace fail a network error occurred
07-06
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值