起航学习网

今天小T要跟大家分享的文章是关于Web前端开发中实现跨域的方法有哪些?正在从事Web前端开发工作的小伙伴们来和小T一起看一看本篇文章吧，希望能够对大家有所帮助。

一、同源策略

同源策略是浏览器的一个安全功能，同源即协议、域名、端口三者相同。它限制了从一个源加载的文档或脚本与另一个源进行数据交互，所以abc.com下的JS脚本请求xyz.com的数据会被拒绝。

注意：跨域限制访问，其实是浏览器的同源策略限制。

二、跨域

当协议、域名、端口任意一个不同时，都算不同域。不同域之间相互请求资源，就算跨域。

注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

三、跨域的几种方法

(1)有三个标签允许跨域加载资源

<img src="">

<link href="">

<script src="">

(2)JSONP

JSONP(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名获取资料，即跨域读取数据。

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时在页面调用的数据。数据则为传入回调函数的JSON数据。

JSONP通过<script>元素来使用，因<script>不受同源策略影响，向<script>指定一个跨域URL。

<script type="text/javascript">

function

callbackFunction(){...}

</script>

<script type="text/javascript"

src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction">

</script>

(3)CORS

CORS(Cross-Origin Resource Sharing，跨域源资源共享)，基本思想为使用自定义的HTTP头部让浏览器与服务器进行沟通，需要浏览器支持CORS。

客户端：发送HTTP请求时，额外添加一个Origin头部，包含请求页面的源信息，服务器根据此信息决定是否响应。

Origin:http://www.abc.com

服务端：在响应头添加Access-Control-Allow-Origin，回发相同源信息(公共资源可回“*”)，若没有此头部，或头部源信息不匹配，浏览器会驳回请求。

Access-Control-Allow-Origin:http://www.abc.com

(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)。也可以设为*，表示不限制域名，向所有窗口发送。

以上就是小T今天为大家分享的关于Web前端开发中实现跨域的方法有哪些的文章，希望本篇文章能够对正在从事Web前端开发工作的小伙伴们有所帮助，想要了解更多Web前端开发知识记得关注IT培训网Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端开发工程师。

文章来源：原创 CodeEdit CodeEdit 

【免责声明：本文图片及文字信息均由小T转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】

Web前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的Web前端开发工程师。现在说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后端开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的Web前端开发工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

文章出自：http://qh.itpxw.cn/peixun/web/202186454.html

文章标题：Web前端开发中实现跨域的方法有哪些?

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉