js跨域问题及常用的两种解决方案

最新推荐文章于 2024-07-12 16:42:46 发布

weixin_33882443

最新推荐文章于 2024-07-12 16:42:46 发布

阅读量144

点赞数

文章标签： json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000005082202

版权

跨域产生的原因

跨域是由浏览器的同源策略引起的，即不同源（协议,域名,端口中其中有一个不同）的js是不能读取对方的资源的。当要网站中的js要请求其他网站的数据时就会产生跨域问题，就像下面这样，浏览器会报错。

图片描述

关于会产生跨域的情况，直接在网上找了一张图，做了很详细的总结。

图片描述

当然这都不是重点，重要的是如何来解决跨域问题。

跨域解决方案

1.jsonp

可跨域的html标签

所有具有src属性的HTML标签都是可以跨域的，包括<script><img><iframe>,所以我们通常会把一些图片资源放到第三方服务器上，然后可以通过<img>标签的src属性引用。例如：

var img = new Image()
img.src = 'http://some/picture'      // 发送http请求

利用<script>标签实现跨域

首先我们来说一下什么是jsonp，我们都知道json是一种数据交换格式，虽然json与jsonp只差了一个字母但是它们两个却完全是两码事。jsonp是依靠开发人员的聪明才智创造出的一种非官方的跨域数据交换协议。它允许在服务器端集成Script tags返回至客户端。
但是这和我们想要跨域请求数据又有什么关系呢？虽然我们不能直接发送ajax请求数据，但是要知道<srcitp>标签是可以跨域的，如果我们动态的创建一个<script>标签，同时src到不同源的服务端url，服务端按照约定返回一段可执行js的代码。类似这样：

callbackFunction([“customername1","customername2"])

而在客户端我们只需要定义一个预定好的回调函数即可。

var callbackFunction = function(data){
    // 处理跨域请求得到的数据
};
var script = $('<script>', {src: 'http://b.a.com/bar'})
$('body').append(script)

其中的callbackFuncton是我们在客户端定义好的在数据请求成功后要执行的回调函数。
好了总结一下用jsonp请求数据的基本流程。

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

jsonp的缺点

没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求.
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。

2.跨域资源共享（CORS）

CORS是HTML5标准中定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。浏览器中的报错：

No 'Access-Control-Allow-Origin' header is present on the requested resource.
那我们就给它设置一个Access-Control-Allow-Origin属性就好了呗。就像这样

setHeader("Access-Control-Allow-Origin", "*") # 允许所有域名访问，或者
setHeader("Access-Control-Allow-Origin", "http://test.com")# 允许test.com这个域名发过来的所有请求。

参考文章：
http://www.tuicool.com/articles/jmY3Yr6
https://segmentfault.com/a/1190000002647143
http://justcoding.iteye.com/blog/1366102/