简便方式（oracle授权的）

实现Web前端跨域及其常见方案

Web跨域（Cross-Origin Resource Sharing, CORS）是浏览器实施的安全策略，其限制在不同域发出的AJAX请求，此类请求只有在服务器发出一定的 HTTP 响应头之后，浏览器才会允许实际的请求发出。

大多数主流浏览器都会拦截所谓的跨域 AJAX 请求，浏览器直到收到服务端的确认，浏览器才会允许跨域的 AJAX 调用（ JSONP 这种请求除外）。

在Web前端实现跨域，主要有两种方式：

一种是针对服务端添加CORS设置，即通过设置HTTP响应头，来让浏览器允许，跨域访问某些资源；

第二种就是使用一个反向代理（Reverse Proxy）来允许跨域访问。

以下是简便方式实现Web前端跨域的常见方案：

1、 JSONP：在客户端进行操作，通过script标签的src属性发出的请求，为GET类型的请求，客户端在发出请求的时候可以指定一个回调函数，这个函数将会在服务端的响应中被调用。

“`javascript

function jsonpCallback(data){

console.log(data); // do something

}

let script=document.createElement(‘script’);

script.src=”http://localhost:3000/data?callback=jsonpCallback”;

document.body.appendChild(script);

2、CORS：是通过浏览器发出OPTIONS类型的请求，服务端响应此请求时要指明允许跨域访问的域名（origin响应头），浏览器收到响应之后，进行后续的跨域操作，具体的Code如下：

```javascript
let xhr  = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.withCredentials = true // 需要设置这个参数，才能携带Cookie
xhr.send(null)

3、反向代理：此方式是服务器端进行转发，服务端在发出响应时，允许浏览器跨域访问，同时将用户请求发送到另外一个服务接口，从而达到跨域请求目标地址。

以上这三种方式，都可以有效实现跨域操作。但各有利弊，使用JSONP方式，只支持GET请求，安全性比较差；CORS支持所有类型的HTTP请求，但是兼容性有些问题，不支持IE8以下的浏览器；而反向代理模式在跨域的安全性和兼容性上比较好，但架构复杂，比较耗费开发和运维的成本。

最终，在实现Web前端跨域的时候，应该根据实际的应用需求，选择适合的跨域方式来满足它们。