问题描述

RequireJS跨域加载HTML模版失败，例如：
在a.com域名下请求CDN域名下的模版，text.js插件会把html文件转成html.js文件去加载，由于并没有生成html.js文件，所以会404

问题原因

  • 打包后部分HTML模版无法内联，原因是同一模块引入的路径不一致
  • 通过XHR请求HTML模版，浏览器同源策略，无法跨域

解决方案

  • 打包后内联HTML模版，无需异步加载HTML文件，需要正确配置模版引用否则无法打包成内联模版，打包配置默认是内联模版
  • 打包后生产模版的JS文件，即会生成一个模版的html.js文件，里面定义的是一个模块，返回html模版字符串，通过设置打包配置参数即可optimizeAllPluginResources: true。可以跨域解析，但产生大量冗余文件，可以单独上传，不好维护。

官方文档详细说明

https://github.com/requirejs/text

RequireJS跨域加载html模版后被转成JS问题分析及解决的更多相关文章

  1. jquery mobile 和phonegap开发总结之三跨域加载页面

    跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...

  2. jquery中ajax跨域加载

    今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试 <!DOCTYPE html> <html lang="en"> ...

  3. chrome浏览器下用jQuery的load函数来跨域加载页面，响应状态status为(canceled)是什么情况？ JSON和JSONP，也许你会豁然开朗，含jQuery用例

    http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com ...

  4. pdf.js跨域加载文件

    pdf.js一个基于Html的工具类,熟悉pdf.js的朋友们很清楚,pdf.js帮助我们做了很多事.尤其金融类网站会产生很多的报表.需要在线预览.pdf.js绝对是我们的首选 本地预览 在pdf.j ...

  5. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  6. script通过script标签跨域加载数据

    /********************************************************** 说明:跨域请求数据Javascript组件 ------------------ ...

  7. flash 跨域加载 二次加载

    var url2:String = "http://thirdapp0.qlogo.cn/qzopenapp/fa5d80ebf9fc89aaa1d7ddb0e1b861e58d77b409 ...

  8. requirejs：模块加载(require)及定义(define)时的路径小结

    原文地址:http://www.tuicool.com/articles/7JBnmy 接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模 ...

  9. RequireJS 主入口加载模块经常会加载失败的问题

    在接入requirejs时,在main入口遇到了这样的问题,使用jquery,刷新10次页面会有3-4次加载失败,找不到$符号等等 require.config({ 'baseUrl': './mod ...

随机推荐

  1. struts2框架之重复提交问题

    防止重复提交 1. 什么是重复提交 * 提交表单时,点击一次后,页面没有刷新时,马上又点击一次,就是重复提交 * 提交后,通过浏览器的回退,又回到了表单页面,再次提交 * 提交后,按F5刷新,也是重复 ...

  2. NDK历史版本下载方法

    再比如说,你要下载Android NDK, Revision 8b ,只要下面链接就可以了: http://dl.google.com/android/ndk/android-ndk-r8b-Linu ...

  3. hue报错StructuredException: timed out (code THRIFTSOCKET): None的处理

    通过hue的web界面进行hive的sql查询,无法显示结果并报错timeout 报错如下:[28/Jul/2017 11:23:29 +0800] decorators ERROR error ru ...

  4. Docker 导出 & 导入

    Docker 容器因为它的快速部署被深受喜爱.本文记录 Docker 容器的导出与导入,分别用到 Docker 的 export 和 import 命令. 1.查看正在运行的容器: [root@loc ...

  5. boost.Asio lib

    Documentation for Boost.Asio http://www.boost.org/doc/libs/1_62_0/doc/html/boost_asio.html https://w ...

  6. Ex4_21 最短路径算法可以应用于货币交易领域..._第十二次作业

    (a)   建立一个有向图G(V,E),每个顶点表示一种货币,两个顶点之间的边权的大小ex[u][v]表示两种货币之间的汇率,若要找一个最有利的兑换序列,把货币s兑换成货币t,即在若干种兑换序列中选择 ...

  7. [MySql]索引的一些技巧

    一.多表子从查询 多表查询时,子查询可能会出现触发不了索引的情况 ,)); 上面语句,test_1和test_public都WHERE了主键id,常理来说这个查询不存在问题,事实上主语句并不会触发索引 ...

  8. javascript中的字符串对象

    1.javascript的对象的概念 在javascript中,除了null和undefined以处,其他的数据类型都被定义成了对象 也可以用创建对象的方法定义变量,string,math,array ...

  9. Confluence 6 审查日志

    日志审查能够允许管理查看你 Confluence 站点所做的修改.这个在你希望对你的 Confluence 进行问题查看或者是你希望对你 Confluence 保留重要的修改事件,例如修改了全局权限. ...

  10. vue install后出现的问题

    出现这个问题你要先把node-sass移除后重新安装 执行下面命令 npm remove node-sass --save-dev 然后安装 npm install node-sass@latest ...