‘壹’ Web前端中实现跨域的方法有哪些
今天小编要跟大家分享的文章是关于Web前端中实现跨域的方法有哪些?正在从事Web前端工作的小伙伴们来和小编一起看一看本篇文章吧，希望能够对大家有所帮助。
一、同源策略
同源策略是浏览器的一个安全功能，同源即协议、域名、端口三者相同。它限制了从一个源加载的文档或脚本与另一个源进行数据交互，所以#下的JS脚本请求#的数据会被拒绝。
注意：跨域限制访问，其实是浏览器的同源策略限制。
二、跨域
当协议、域名、端口任意一个不同时，都算不同域。不同域之间相互请求资源，就算跨域。
注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
三、跨域的几种方法
(1)有三个标签允许跨域加载资源
(2)JSONP
JSONP(JSONwithPadding)是json的一种"使用模式"，可以让网页从别的域名获取资料，即跨域读取数据。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时在页面调用的数据。数据则为传入回调函数的JSON数据。
JSONP通过
src="#/try/ajax/jsonp.php?jsoncallback=callbackFunction">
(3)CORS
CORS(Cross-OriginResource
Sharing，跨域源资源共享)，基本思想为使用自定义的HTTP头部让浏览器与服务器进行沟通，需要浏览器支持CORS。
客户端：发送HTTP请求时，额外添加一个Origin头部，包含请求页面的源信息，服务器根据此信息决定是否响应。
Origin:http://www.#
服务端：在响应头添加Access-Control-Allow-Origin，回发相同源信息(公共资源可回“*”)，若没有此头部，或头部源信息不匹配，浏览器会驳回请求。
Access-Control-Allow-Origin:http://www.#
(4)WebSockets
Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同源策略对其不适用。
WebSocket在建立连接时要借助HTTP协议，建立连接后会从HTTP交换为WebSocket协议，WebSocket的server
(服务端)与client(客户端)都能主动向对方发送或接收数据。只有支持WebSocket协议的服务器才能正常工作。
(5)postMessage
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信
API(Cross-document
messaging)。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。
postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源(origin)。也可以设为*，表示不限制域名，向所有窗口发送。
以上就是小编今天为大家分享的关于Web前端中实现跨域的方法有哪些的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
文章来源：原创CodeEditCodeEdit
‘贰’ 前端请求接口出现跨域问题怎么解决
使用jsonp
响应头增加CORS跨域响应的信息
服务器（同域内的）做一次转发
‘叁’ 如何解决前端跨域问题
可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。
‘肆’ 前端解决跨域都有哪些手段
1. jsonp解决跨域，缺点:只局限于GET请求；应用场景：请求第三方平台数据（比如天气数据）时使用较多
2. 服务器端设置Access-Control-Allow-Origin响应头，允许前端跨域。这种办法比较便捷，前端不需要调整代码，一般企业中用的比较多
3. 搭建一个本地的中间服务器，作为代理，帮助获取需要跨域的服务器的数据
4. vue项目可以进行proxy反向代理的配置，实现跨域
黑马程序员官网有成套免费视频哦，有什么不懂的可以直接过去学习。
‘伍’ 如何解决前端跨域问题
IIS服务器可以修改web.config实现跨域
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Methods" value="GET, PATCH, POST, PUT, DELETE, OPTIONS" />
<add name="Access-Control-Allow-Headers" value="AuthToken, Authorization, Origin, Content-Type, Accept, X-Requested-With" />
<add name="Access-Control-Allow-Origin" value="http://域名" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
‘陆’ 前端跨域问题有哪些常用的解决方式
强烈推荐JSONP。
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html
http://www.runoob.com/json/json-jsonp.html
http://justcoding.iteye.com/blog/1366102/
‘柒’ 前端和后台会有跨域问题，一般有哪些方法
‘捌’ 前端解决跨域都有哪些方法
什么是跨域？
浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：
最常用的四种跨域解决方案
1.cors
cors跨域资源共享允许是在服务端"Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。
2、 通过jsonp跨域
Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript，相当于直接用JavaScript解析。
3、postMessage跨域
在h5中新增了postMessage方法，postMessage可以实现跨文档消息传输，我们可以通过Windows的message事件来监听发送跨文档消息传输内容。
4、proxy（代理）
原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。
‘玖’ 跨域是指什么,因为什么引起的有哪些解决方案web前端知识
广义跨域就是指跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。
当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。这就形成了“跨域”。
‘拾’ 前端工程师网站跨域问题怎么解决
1）.margin-top,margin-bottom不能正常显示时
一.有时会遇到外层中的子层使用margin-top不管用的情况；这里我们需要在子层的前后加上一个
div{height:0;overflow:hidden;}
例
CSS样式表中：
#box {background-color:#eee;}
#box p {margin-top: 20px;margin-bottom: 20px;text-align:center;}
解决方法：在P标签前后各加2个空的div：<divstyle="height:0;overflow:hidden"></div>
二.网页中头部，中部，底部的居底部有时给个margin-bottom:10px;不管用也是要给个清除属性的.clear{clear:both;font-size:0;line-height:0;}在底部<div id="footer"></div>下加个<div></div>
2）.div层中高度自适应问题
网页前端科技人员在设计网页时不可能知道客户在要他们自己的网站内容页里加多少文字或图片内容
这时我们就不能规定div层的高度，为此应写成min-height:200px;height:auto!important;height:
200px;overflow:visible;这样ie7,ff,ie6浏览器的高度自适应问题就解决了，这些在
网站中用到最多了。
3）.div层中子层的居底部对齐问题
div中的定位问题有很多也很麻烦，但弄懂了就OK了，在一个大的div层中如何让子层的内容居底部
对齐就涉及到了position定位问题；
例
div层#box{position:relative;border:1px solidred;width:600px;hegiht:400px;}
div子层#box .wrap{position:absolute;bottom:0;border:1px dashedblue;width:200px;height:
100px},最近写的网站中就用到了
4）.div层中清除clear属性的一小部分应用
在div中一个大的层里面有很多子层，若是加上边框在ie7、ie6中或许会正常显示，但是在ff中可能
只会成一条线了，此时在最外层的后面加上<div style="clear:both"></div>或者设 .wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}后在每个浮动外框调用wrapfix；学生书网里用到最多了。
5）.解决IE8下div移位、错位等兼容性问题
在<head>标签后面的第一句话加上<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />就OK了
6）.单行文字居中与字体样式问题
在div中一个层中只有一行文字，要让这层中的文字居中，可设line-height的高度和层的高度一样，注意这一层中的文字不能换行，此外，设了line-height时再给定字体样式font:bold 14px "宋体";这时要把font:bold 14px "宋体";放在line-height的前面，否则字体样式不显示文字也不居中；或者将font:bold 14px "宋体";改成font-size:16px;font-weight:bold;font-family:"宋体";就OK了。
7）.鼠标滑上去的特殊效果
往往为了达到显眼的效果，我们会写到一些好看的效果，方法一在样式表中写：ul li a{border:1px solid red;}ul li a:hoverimg{filter:alpha(opacity=40在ul标签中调用即可方法二：在样式表中写上：.hover img{filter:alpha(opacity=40);}在div中调用onmouseover="this.className='hover'"onmouseout="this.className=this.classtype"即可
8）.IE6中高度不对问题
今天在div中给定了高度为1px,其它浏览器显示正常，可是ie6中显示的高度就不对了，这时我给样式表中加了个font-size:0px;line-height:0px;就好了
9）.ul在外框里margin-top不起作用的问题
在div大框子里用了ul作导航的时候为了合ul层居中显示，设ul的样式表为margin-top:-15px不起作用了，此时应该将div大框设定高度后给个line-height与height一样的高度，ul层就自动居中了。
例如
10）.ff中margin-top有时不起作用的问题
今天头晕脑涨的把这问题给解决了，这几天写标网都有累似问题，可是一直都是换个写法解决的，今天的这个办法也不只可行试试还是可以的，在一个div外框层中给个宽度例如，#div_wrap{width:280px;height:100%;}
其次在这个框子里设一个.div_top{widh:100%;font:bold12px "宋体";height:24px;line-height:24px;}
.div_center{border:1px solid#dbdbdb;border-top:none;background:#fff;min-height:460px !important;height:auto!important;height:460px;overflow:visible;}
最后在这个div_center里套个ul li时经常会在ff中出问题，也就是在div_top与div_center中莫名的多了几个像素的空格，这时给ul样式表设个display:inline-table即可；
11）.list-style-image的用法
div中经常用到新闻列表前面有图标的样式，有两种简单的方法
一.可以写成ul.menu{width:100%;} ul.menuli{background:url(em_img/small_icon.jpg) 5px center no-repeat;list-style-position:inside;padding-left:18px;}即可在各浏览器正常显示
二. 可以设ul.menu{width:80%;} ul.menuli{list-style-image:url(em_img/small_icon.jpg); }
此时新闻列表前的小图标即可在ie6，ie7，ie8,ff中都正常显示但，ie6需要不断的刷新才能正常显示小图标；
12）.
IE6 li:hover兼容问题
<scripttype="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName_r("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!］>
</script>
13）.ie6下支持position:absolute;
最近写一个短信平台的页面用到的底部固定的层，在ff和ie7,ie8下都是好的，可到ie6下就不行了，转了整个地球终于出来了：
background-attachment:fixed; }
#bottomNav {background-color:#096; z-index:999; position:fixed; bottom:0; left:0;width:100%; _position:absolute;
_top: expression_r(documentElement.scrollTop+ documentElement.clientHeight-this.offsetHeight); overflow:visible; }
样式表中调用即可！详细请见“高度自适应屏幕尺寸！”
14）.border:none;与border:0;的区别
1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在
【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏
总结：
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可
对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。
15）.ie下。png的图片不会有灰色背景出现
注：首推PNG8，即使在IE6中它的透明背景也能被正确显示。PNG8使用的技巧是，输出时把“杂边”设置为和背景接近的颜色
1.几经周折终于把ie6下.png有色图问题解决了，原来IE6.0原本支持png8的索引色透明度，但不支持png或8位以上的alpha 透明度，在IE6.0下，非PNG8格式的透明图片部分，会显示为淡淡的灰绿色。在网页中头部加个代码<!--[if IE 6]>
<script type="text/javascript" src=""></script>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->即可！