js跨域解决方案 |
顶( ) |
| 最后更新日期： | 有 人发表评论 (点击查看) |
js跨域
1. 概念
1.1 跨域
域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。简而言之，跨域访问，就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。详细列表如下：
注：1、如果是协议和端口造成的跨域问题“前台”是无能为力的；2、在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
2. 问题描述
访问服务器下的一个html文件，该文件中嵌了一个FineReport的模板文件，但是该模板文件在另外一个域中，如果直接访问html文件，是无法调用到FineReport模板文件的这就涉及到跨域问题，该如何解决呢？
3. 解决思路
通过一个中转文件来实现跨域通信，因为js可以执行不同域下的文件，那么就可以将该被执行文件放置需要通信的那个不同的域下，该被执行文件可以对同一个域下的所有数据进行操作。
4. 示例
端口号为8080的服务器下的lo1.html中嵌入了一个iframe，iframe中展现的是端口号为8081下的一个FineReport模板文件test.frm，test.frm里面有一个文本框和一个按钮，在点击test.frm里面的按钮时，则可将文本框中的内容赋给lo1.html中的文本框。
5. 操作步骤
5.1 web服务器准备
在机器下新建两个tomcat服务器，tomcat1和tomcat2，tomcat1使用默认端口号8080，tomcat2将http访问端口号改为8081，shutdown端口号（默认8005）改为8055，8009端口号改为8099，这样修改的原因是，如果只修改http端口号，两个tomcat服务器将不能同时启动，如果还不能同时启动两个服务器，请自行上网上查找答案。
5.2 tomcat1
在tomcat1下部署WebReport工程，该工程下需要放三个文件，lo1.html，proxy.html，proxy.js。
proxy.html是中转的html，它和lol.html（主页面）在同一个域，其作用就是执行proxy.js，并被test.frm动态加载，而proxy.js是其他域的传来的数据对lol.html的处理。
- lo1.html代码如下：
- proxy.html代码如下：
- proxy.js代码如下：
5.3 tomcat2
在tomcat2服务器下部署工程WebReport，将我们的报表工程独立部署过去，删除reportlet下的所有模板文件，新建一个表单文件test.frm，样式如下：
给button0增加点击事件，代码如下：
注：上面的所有代码中涉及到的ip地址都要改成自己的ip地址，不能用localhost。
5.4 效果查看
同时启动tomcat1和tomcat2，在浏览器端打开lo1.html，即在地址栏输入http://192.168.100.230:8080/WebReport/lol.html，如下图：
在iframe中的文本框中输入FineReport，点击button0按钮，会看到最左侧的文本框（显示I'm main的文本框）只中也会显示FineReport，这就实现了js跨域，如下图：
|
|
|
文明发言，用心评论
|
应用此篇文章，您:
不费力
研究了一会 琢磨了好久 |
||
|
Copyright©2019 帆软软件有限公司
苏ICP备18065767号-3 |