跨域的几种方法

浏览器出于安全方面的考虑，只允许客户端与本域（同协议、同域名、同端口，三者缺一不可）下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源，这被称为同源策略。

而有时候，我们不得不在一个客户端下访问不同域中的资源，于是需要用到一些方法来避开浏览器的同源策略，这些方法被称为跨域。

实现跨域有如下几种方法：

JSONP（JSON with Padding）是数据格式JSON的一种使用模式，可以使网页实现跨域请求。其原理主要利用了 HTML 的 script 标签。由于 script 是采用开放策略，通过设置 src 引入不同域下的资源，所以可以通过 script 实现跨域，该方法需要后端支持。jsonp跨域的实现步骤如下：

下面来做个演示，首先为演示方便，将系统的hosts做如下修改：

以上例子最终实现了由example.a.com到example.b.com的跨域。应注意的是，因为 <script>只能发送GET请求，所以jsonp只能实现GET请求的跨域。如果希望能实现其他请求的跨域，就可以用接下来介绍的一种方法——CORS。

CORS（全称为：Cross-Origin Resouce Sharing）跨域资源共享，是一种通过ajax跨域请求资源的方法。浏览器将CORS请求分为两大类，简单请求（simple request）和非简单请求（not-so-simple request，浏览器对这两种请求的处理方式不一样。如果请求满足以下两个条件，则为简单请求。

简单请求的实现方式即当用XMLHttpRequest发请求时，浏览器如果发现该请求不符合同源策略，会给该请求加上一个请求头origin，origin用来说明本次请求来自哪个源（协议+域名+端口）。如果origin指定的源不在后台允许范围内，后台会返回一个正常的HTTP响应，然后浏览器会发现该响应头部信息不包含Access-Control-Allow-Origin字段，然后抛出一个错误，该错误被XMLHttpRequest的onerror函数捕获，响应被驳回，但因为该错误无法通过状态码识别，所以HTTP回应的状态码还是200。如果origin在后台允许范围内，则服务器返回的响应，会包含Access-Control-Allow-Origin：Origin（指定的源）信息，浏览器此时不会抛错，响应能正常处理。

非简单请求是是请求方法为PUT或DELETE，又或者Content-Type为application/json的对服务器有特殊要求的请求。非简单请求的CORS请求，会在正式通信前增加一次HTTP查询，称为预检（preflight），询问服务器当前网页所在域名是否在服务器的许可名单中，如果在，则发出正式的XMLHttpRequest，之后就与简单请求一样，不在则报错。

依旧用上面的例子。

最终实现的效果与第一个jsonp的例子一样。

还有一种方式，就是通过降域来实现跨域。即通过设置document.domain的方式，将两个域名的domain设置为一个，如对于a.example.com和b.example.com，可以通过js设置 document.domain = "example.com" ，实现跨域。

做个演示，假设在 http://a.example.com:8080 下有一个a.html文件，其中a.html中有一个 iframe ，它的 src 为 http://b.example.com:8080/b.html 。

用降域方法实现跨域 *** 作简单，但是有一些缺点。比如域名只能往下设置，不能回去，比如从example.com回到a.example.com。同时如果一个子域名被攻击，多个被降域的域名都会被连带攻击，有很大的安全风险。

postMessage是一个web API，可以实现跨域通信。 window.postMessage() 被调用时，会在所有页面脚本执行完毕后，向目标窗口派发一个 MessageEvent 消息。语法如下：

MessageEvent 具有如下属性：

用一个与上面降域类似的例子来做演示。同样有两个页面a.html和b.html，a.html中的 iframe 的 src 指向b.html。

最终实现a.html与b.html通信效果如下：

使用postMessage方法应注意的是，如果不希望从其他网站接收message，那么不要为message事件添加任何监听器。如果确实希望接收其他网站的message，那么应该始终使用origin和source属性来验证发件人的身份，以免被恶意的网站攻击。

以上就是几种常见的跨域方法，各有优劣，且各自都有一定的安全问题，在日常应用中，需要有针对性的使用，对可能的安全风险采取相应措施。

前端web开发html避免js的跨域访问的方法是后台服务端做域配置兼容处理。

1、在server端请求过滤的时候加入以下控制：

<httpProtocol>

<customHeaders>

<add name="Access-Control-Allow-Origin" value="*" />

</customHeaders>

</httpProtocol>

Access-Control-Allow-Origin这个属性配置成*就表示接受任何域过来的请求

2.ajax中请求如下：

$.ajax({

xhrFields: {

withCredentials: true

},

data:{ my: 'a' },

url: 'http://MyApp/Page', 这里是跨域访问

type: 'POST'

})

协议+域名+端口号都相同才是同域

在 HTML 中，<a>, <form>, <img>, <script>, <iframe>, <link>等标签以及 Ajax 都可以指向一个资源地址，而所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。

如果对跨域请求不做限制，会有安全隐患

跨源资源共享 Cross-Origin Resource Sharing(CORS) 是一个新的 W3C 标准，它新增的一组HTTP首部字段，允许服务端其声明哪些源站有权限访问哪些资源。换言之，它允许浏览器向声明了 CORS 的跨域服务器，发出 XMLHttpReuest 请求，从而克服 Ajax 只能同源使用的限制。

在使用go语言写测试服务的时候遇到了前端跨域请求问题,只需在go中加入

https://www.jianshu.com/p/f880878c1398

http跨域： https://zhangbinalan.gitbooks.io/protocol/content/httpkua_yu_qing_qiu.html

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

---