WEB开发中的跨域问题及解决方案

WEB开发中的跨域问题及解决方案

下图中的错误信息大家是否在WEB开发的时候遇到过呢？这就是一个典型的跨域访问错误信息。出现跨域访问错误是因为浏览器的同源策略导致的。本文将谈一谈浏览器的跨域问题以及流行的解决方案。

同源策略（Same Origin Policy）是浏览器最核心也是最基本的安全功能。它限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。同源指的是协议相同、域名相同、端口相同，举例来说：

随着互联网的发展，对用户体验的要求越来越高，AJAX应用也就越发频繁，AJAX的本质就是 XMLHttpRequest。但 XMLHttpRequest 受到同源策略的约束，不能跨域访问资源。业界流行的解决方案有三种：服务器代理、JSONP、CORS，接下来将分别介绍这三种方案。

代理服务器

通过Nginx反向代理解决跨域问题是利用了服务端之间的资源请求不会有跨域限制的特点实现的，具体来说就是前端发起的请求被Nginx拦截，再由Nginx代由转发请求到资源服务器请求资源。

Nginx需要对请求进行拦截，再由Nginx转发请求到资源服务器请求资源。通过location配置对包含“cross_origin”的请求拦截，然后通过rewrite对请求路径进行重写，最后将请求转发到172.24.177.38:5000服务器，nginx.conf配置如下：

JSONP(JSON with Padding)

JSONP是JSON的一种"使用模式"，可以让网页从别的域名那获取资料，即跨域读取数据(只支持GET请求，不支持POST、PUT等其他类型的HTTP请求)。JSONP利用的是标签可以跨域的特性，跨域URL返回的脚本不仅包含数据，还包含一个回调。jQuery已经提供了JSONP的使用

JSONP的使用步骤：

1. 首先在客户端注册一个callback, 然后把callback的名字传给服务器。

2. 服务器生成json数据以javascript语法生成一个function , 名字就是传递上来的参数callback。

3. 最后将json 数据以入参的方式，放到function中，这样就生成了一段js语法的文档，返回给客户端。

4. 客户端浏览器解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）。

CORS(跨域资源共享)

CORS机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中使用 CORS，以降低跨域 HTTP 请求所带来的风险。CORS与JSONP的使用目的相同，都是为了解决浏览器跨域问题，但CORS比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，CORS不支持IE8以下版本的浏览器。

整个CORS通信过程，都是由浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是web服务器。只要服务器端实现了CORS接口，就可以跨域访问。CORS是我们日常开发中最常见的一种跨域解决方案，现将常见后端服务器的CORS配置总结如下：

Java版：

Spring Boot版：

Python Flask版：

NodeJs版：

附跨域请求HTTP响应字段介绍:

origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。此项为必填项。

指定了preflight请求的结果能够被缓存多久，delta-seconds表示preflight请求的结果在多少秒内有效。

指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。

指明了实际请求所允许使用的 HTTP 方法。

用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

总结:

至此，跨域访问问题以及流行解决方案就介绍完毕了。在HTML5之前，JSONP已经成为跨域的实施标准了，jQuery也给出了支持。 虽然它是一种Hack手段，但并没有产生额外的安全问题。 因为JSONP要成功获取数据，需要跨域资源所在服务器的配合，比如资源所在服务器需要自愿地回调一个合适的函数，所以服务器仍然有能力控制资源的跨域访问。

跨域问题的最优方案是使用CORS技术， 可以支持GET,POST, PUT等HTTP方法，从机制上解决跨域问题。 值得注意的是Access-Control-Allow-Origin头字段是资源所在服务器设置的， 访问控制的责任仍然是在提供资源的服务器一方，这和JSONP是一样的。

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

http://www.runoob.com/json/json-jsonp.html

1

END

1