前端学习

前端学习

@色少1年前

03/17
09:45
前端技能 日常开发记录 服务器端知识

当Axios跨域请求遇上request⾃定义headers之错误排坑

坑之背景:
ERP项⽬中不同⻚⾯请求同⼀个接⼝/trace/item/staff/list(只有线上有此接⼝,其他灰度没发,直接请求到这
⾥, ⼀个字,⽆语)参数⼀致, 服务端配置⼀致

1、商品操作⽇志
使⽤jQuery 的$.ajax的⽅式请求, 响应正常

2、交易 –> 发货⽐例 –> 变更记录
使⽤axios.get⽅式,就⼀直报错,⼀直报错,⼀直报错,Network
Erorr

坑之分析:
为什么相同的相同的请求,不同的⽅式,结果会不⼀样?这个时候去怀疑后端配置不对,显然有点耍⽆赖。没有办法,冷静下来想想, axios
请求⽅式有问题, 那⼀定是它做了什么不为⼈知的事情,那我们从这个往下查。

#1. 由于ERP特定要求, 前端请求会去改写请求头,在header⾥⾯添
就是这个操作会导致触发Request Method为OPTIONS的预检请求
(preflight)。⽽$.ajax是不会触发这个动作。后端该请求的Allow-
Method⾥⾯不⽀持OPTIONS⽅式,就出现了上图中的预检请求不通过
详⻅:https://www.jb51.net/article/193303.htm

#2. 让ERP后端这个接⼝⽀持OPTIONS⽅式,然后再测再报错

#3. ngnix跨域设置没有加域名,添加跨域域名,再测再报错

原来preflight请求还要校验请求头, 那就让后端加上呗。nginx⾥⾯加或后端代码⾥⾯加,之⼀即可
Access-Control-Allow-Headers 添加CompanyId,TrackId

#4. 然后就没有然后了, 请求终于通了。。。。

总结: 要解决此类问题拢共分三步(某个特定请求级别)
1. Allow-Method 允许 OPTIONS⽅式
2. Access-Control-Allow-Origin 对其他各灰度环境开放
3. Access-Control-Allow-Headers 添加CompanyId,TrackId等需要

允许通过的字段

当Axios跨域请求遇上request⾃定义headers之错误排坑

@色少10年前

08/15
14:55
服务器端知识

UEditor移植到WordPress 3.9.2

转载:http://www.ycysky.com/20140416/6725.html

之前一直看了一下怎么把wordpress 的后台原始的编辑器改成百度的uedior~终于找到篇好的文章。

新建一个文件夹new-ueditor,用于存放新插件的相关文件。

还记得上面准备工作里两个压缩包吗,现在就要提取相关文件到new-ueditor中去。

从 ueditor1_3_6-utf8-php.zip 中提取 ueditor1_3_6-utf8-php文件夹 到 new-ueditor 下,并改名为 ueditor

从 wp-ueditor.zip 中提取 main.php 到 new-ueditor 下 ,并改名为 ueditor.php

从 wp-ueditor.zip 中提取 ueditor.class.php 到 new-ueditor\ueditor 下 

现在所需的文件已经足够了,以后的修改全在 new-ueditor文件夹 下进行。

new-ueditor 文件夹的目录结构如下:

1.jpeg

new-ueditor\ueditor 文件夹的目录结构如下:

2.jpeg

修改文件:

既然这些文件是从最新版UE和旧版UE插件中整合而来,那么必然会存在一些文件路径、文件名上的差异,接下来修改这些差异。

 打开 new-ueditor\ueditor.php 文件,找到以下代码并修改。

@include_once( dirname( __FILE__ ) . "/ueditor.class.php" );

修改为

@include_once( dirname( __FILE__ ) . "/ueditor/ueditor.class.php" );

打开 new-ueditor\ueditor\ueditor.class.php,找到以下代码并修改。

$url = plugin_dir_url(__FILE__);

echo '<script type="text/javascript" src="'.$url.'ueditor/third-party/SyntaxHighlighter/shCore.js"></script>'; 

echo '<link type="text/css" rel="stylesheet" href=" '.$url.'ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" />'; 

}

修改为

$url = plugin_dir_url(__FILE__);

echo '<script type="text/javascript" src="'.$url.'third-party/SyntaxHighlighter/shCore.js"></script>'; 

echo '<link type="text/css" rel="stylesheet" href=" '.$url.'third-party/SyntaxHighlighter/shCoreDefault.css" />'; 

}

继续找到

function ue_importUEditorResource(){ 

    $url = plugin_dir_url(__FILE__); 

    echo '<script type="text/javascript">window.UEDITOR_HOME_URL="'.$url .'ueditor/";</script>'; 

    echo '<script type="text/javascript" src="'.$url.'ueditor/editor_config.js"></script>'; 

    echo '<script type="text/javascript" src="'.$url.'ueditor/editor_all.js"></script>'; 

    echo '<link type="text/css" rel="stylesheet" href=" '.$url.'ueditor/themes/default/ueditor.css" />'; 

}

修改为

function ue_importUEditorResource(){ 

    $url = plugin_dir_url(__FILE__); 

    echo '<script type="text/javascript">window.UEDITOR_HOME_URL="'.$url .'";</script>'; 

    echo '<script type="text/javascript" src="'.$url.'ueditor.config.js"></script>'; 

    echo '<script type="text/javascript" src="'.$url.'ueditor.all.js"></script>'; 

    echo '<link type="text/css" rel="stylesheet" href=" '.$url.'themes/default/css/ueditor.css" />'; 

}

最后要修改的就是 WordPress 里的一个文件,这个文件是 wp-admin\edit-form-advanced.php

利用查找功能查找 do_action( 'edit_form_after_title', $post ) 找到以下代码并进行修改 


do_action( 'edit_form_after_title', $post );

if ( post_type_supports($post_type, 'editor') ) {

?>

<div id="postdivrich" class="postarea edit-form-section">

<?php wp_editor( $post->post_content, 'content', array(

 'dfw' => true,

 'tabfocus_elements' => 'insert-media-button,save-post',

 'editor_height' => 360,

) ); ?>

<table id="post-status-info" cellspacing="0"><tbody><tr>

 <td id="wp-word-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></td>

 <td class="autosave-info">

 <span class="autosave-message">&nbsp;</span>

<?php

 if ( 'auto-draft' != $post->post_status ) {

  echo '<span id="last-edit">';

  if ( $last_user = get_userdata( get_post_meta( $post_ID, '_edit_last', true ) ) ) {

   printf(__('Last edited by %1$s on %2$s at %3$s'), esc_html( $last_user->display_name ), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));

  } else {

   printf(__('Last edited on %1$s at %2$s'), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));

  }

  echo '</span>';

 } ?>

 </td>

</tr></tbody></table>

</div>

<?php }

把上面的代码替换为以下代码:


do_action( 'edit_form_after_title', $post );

//========================================== UEditor修改代码开始 ==========================================

if ( post_type_supports($post_type, 'editor') ) {

 $editor_close_flag = get_option("close_default_editor");

 //当UEditor插件停用时引用wordpress原有代码

 if( "true" != $editor_close_flag ){

?>

<div id="postdivrich" class="postarea edit-form-section">

<?php wp_editor( $post->post_content, 'content', array(

 'dfw' => true,

 'tabfocus_elements' => 'insert-media-button,save-post',

 'editor_height' => 360,

) ); ?>

<table id="post-status-info" cellspacing="0"><tbody><tr>

 <td id="wp-word-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></td>

 <td class="autosave-info">

 <span class="autosave-message">&nbsp;</span>

<?php

 if ( 'auto-draft' != $post->post_status ) {

  echo '<span id="last-edit">';

  if ( $last_user = get_userdata( get_post_meta( $post_ID, '_edit_last', true ) ) ) {

   printf(__('Last edited by %1$s on %2$s at %3$s'), esc_html( $last_user->display_name ), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));

  } else {

   printf(__('Last edited on %1$s at %2$s'), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));

  }

  echo '</span>';

 } ?>

 </td>

</tr></tbody></table>

</div>

<?php

 } else { //当UEditor启用时使用修改后的代码

  echo '<script type="text/plain" id="postdivrich" class="postarea">';

  echo $post->post_content;

  echo '</script>';

  echo '<span id="last-edit">';

  if ( $last_id = get_post_meta($post_ID, '_edit_last', true) ) {

   $last_user = get_userdata($last_id);

   printf(__('Last edited by %1$s on %2$s at %3$s'), esc_html( $last_user->display_name ), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));

  } else {

   printf(__('Last edited on %1$s at %2$s'), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));

  }

  echo '</span>';

 }

}

//========================================== UEditor修改代码结束=======================================

 

保存修改。

另外发现,在后台写文章时,编辑器的工具栏浮动时会被WordPress顶部遮挡住一部分,这里需要修改编辑器的配置文件。

配置文件是 new-ueditor\ueditor\ueditor.config.js  

找到

//,topOffset:30

去掉前面的注释符号,即修改为

,topOffset:30

保存。

好了,所有文件都修改完毕了。

 

在实际部署中,为了得到更好的性能,UEditor 插件应该加载 ueditor.all.min.js 而不是 ueditor.all.js 。前者是后者的优化版本。具体修改如下:

在 ueditor.class.php 文件中找到

echo '<script type="text/javascript" src="'.$url.'ueditor.all.js"></script>';

并修改为

echo '<script type="text/javascript" src="'.$url.'ueditor.all.min.js"></script>';

UEditor移植到WordPress 3.9.2