WP Customizer+GULP+Browsersync=拒绝在IFRAME中显示？

时间：2017-07-20 作者：Runnick

我正在使用gulp&；WP开发中服务器的browserSync：

gulp.task(\'browser-sync\', function () {
    browserSync.init({
        proxy: projectURL
    });
});

WordPress运行于localhost:3000/mysite

还有一个监视任务可以检测php中的更改并重新加载浏览器。

由于某些原因，尽管WP customizer没有在iframe中加载站点，但出现以下错误：

Refused to display \'http://localhost:3000/mysite/2012/01/07/template-sticky/?customize_changese…10a90359901&customize_theme=mysite&customize_messenger_channel=preview-0\' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".

很好用http://localhost/mysite 虽然没有端口，但不会自动重新加载。

有没有办法解决这个问题？

3 个回复

SO网友:jamesc

通过将“localhost:3000”添加到“Content Security Policy”标题找到了解决方法：

function edit_customizer_headers () {
  function edit_csp_header ($headers) {
    $headers[\'Content-Security-Policy\'] .= \' localhost:3000\';
    return $headers;
  }
  add_filter(\'wp_headers\', \'edit_csp_header\');
}
add_action(\'customize_preview_init\', \'edit_customizer_headers\');

SO网友:tpaksu

可能已经晚了，但我最近找到了一个过滤器解决方案：

function theme_set_url_scheme($url, $path, $blog_id){
    if(isset($_GET["wp_port"])){
      $parsed_url = parse_url($url);
      $parsed_url["port"] = intval($_GET[\'wp_port\']);
      $scheme   = isset($parsed_url[\'scheme\']) ? $parsed_url[\'scheme\'] . \'://\' : \'\';
      $host     = isset($parsed_url[\'host\']) ? $parsed_url[\'host\'] : \'\';
      $port     = isset($parsed_url[\'port\']) ? \':\' . $parsed_url[\'port\'] : \'\';
      $user     = isset($parsed_url[\'user\']) ? $parsed_url[\'user\'] : \'\';
      $pass     = isset($parsed_url[\'pass\']) ? \':\' . $parsed_url[\'pass\']  : \'\';
      $pass     = ($user || $pass) ? "$pass@" : \'\';
      $path     = isset($parsed_url[\'path\']) ? $parsed_url[\'path\'] : \'\';
      $query    = isset($parsed_url[\'query\']) ? \'?\' . $parsed_url[\'query\'] : \'\';
      $fragment = isset($parsed_url[\'fragment\']) ? \'#\' . $parsed_url[\'fragment\'] : \'\';
      $url = "$scheme$user$pass$host$port$path$query$fragment";
    }
    return $url;
}
add_filter("admin_url", "theme_set_url_scheme\', null, 3);

然后打开customizer，将此querystring变量添加到末尾：

&wp_port=3000

我尝试在不添加querystring参数的情况下执行此操作，但我猜browsersync会将调用重定向回服务器端口80，因此3000自定义端口仅通过browser和browsersync可见。

更好的选择：

将querystring参数添加到browsersync设置中，如下所示：

options: {
    proxy: \'wordpress.dev?wp_port=3000\',
}

因此，您不需要手动执行任何操作。它是现成的。

SO网友:WraithKenny

最好在这个bug报告的提示的一些变体中修改你的吞咽脚本https://github.com/BrowserSync/browser-sync/issues/1241

破解您正在处理的源php文件以使其正常工作似乎。。。不太好。

结束

标签： theme-customizer 小码农

小码农CODE

WP Customizer+GULP+Browsersync=拒绝在IFRAME中显示？

相关推荐