前端跨域常见解决方案（前端跨域问题-总结方案）

前端跨域常见解决方案（前端跨域问题-总结方案）4. websocket协议跨域；3.nodejs的webpack配置进行代理又叫nodejs中间件代理跨域，同样需要服务器端支撑；当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 http 请求。浏览器的同源策略保护机制就把该请求阻止了，这样就产生了跨域问题。1.cors解决跨域，需要服务器端设置：Access-Control-Allow-Origin：*，*表示接受所有域的请求；普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置；若要带cookie请求：前后端都需要设置。；2.jsonp解决跨域，因为在html中<script>标签没有跨域限制的漏洞，网页可以得到其他源动态生存的 json 数据，所以我们可以通过动态创建script，再请求一个带参网址实现跨域通信，需要服务器端支撑，且

跨域是很多前端开发都会遇到的一个问题，那么如何解决跨域问题呢？以下是小编就跨域做的几点总结。

解释跨域解决方案前先列一下关键字

1. 同域：协议 域 端口，三者一致则为同域。

2. 跨域：协议 域 端口，三者任一不同则跨域。

3. 同源策略：同源策略限制了一个源中加载的文档或脚本与其他源中的资源交互的方式。这是一种用来隔离潜在恶意文档的关键安全机制；同源策略本身是一种浏览器的安全保护机制。

跨域问题的产生

当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 http 请求。浏览器的同源策略保护机制就把该请求阻止了，这样就产生了跨域问题。

怎么解决跨域问题

1.cors解决跨域，需要服务器端设置：Access-Control-Allow-Origin：*，*表示接受所有域的请求；普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置；若要带cookie请求：前后端都需要设置。；

2.jsonp解决跨域，因为在html中<script>标签没有跨域限制的漏洞，网页可以得到其他源动态生存的 json 数据，所以我们可以通过动态创建script，再请求一个带参网址实现跨域通信，需要服务器端支撑，且只支持get请求；

3.nodejs的webpack配置进行代理又叫nodejs中间件代理跨域，同样需要服务器端支撑；

4. websocket协议跨域；

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

5. 以及各种通过iframe的方式进行跨域的，用的较少；

总结：

1. 跨域问题一般都是需要服务器端做支持才能解决，跨域一般只存在于开发联调阶段，上线服务器端后，都是请求同源数据，不会产生跨域问题；
2. 同源策略是浏览器的一个安全功能，不同域的脚本代码如果随意修改对方资源，那么就会产生很大的安全隐患；
3. 解决跨域问题，同时就是解决同源策略的限制，所以跨域都需要服务器端支撑；

以上是小编对跨域的总结，如有什么不对或者有什么更好的建议欢迎下方留言。