前后端跨域解决方案（前后端分离如何解决跨域）



前后端分离跨域问题的几种解决方案

一、为什么会出现跨域问题?

二、什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

• 1.安全性：浏览器要防止当前站点的私密数据不会向其他站点发送 如当前站点的Cookie,LocalStorage,IndexDb不会被发送到其他站点或被其他站点脚本读取到无法跨域获取Dom，无法发送Ajax请求。
• 2.可用性：大型站点的图片，音视频等资源，希望部署在独立服务器上，为缓解当前服务的压力，开放某些特定的方式，访问非同源站点 如：等，可以同src属性跨域访问允许跨域提交表单/或重定向请求。

三、解决方案

1.后台服务端解决方案

• 方法一：@CrossOrigin

• 方法二：

2.Nginx代理服务器，反向代理接口请求

3.jsonp方式

• JSONP是怎么产生的：

• 具体原理：

服务端提供的js脚本是动态生成的，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

• JS调用实例：

我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

• JQuery调用实例：

是不是有点奇怪？为什么我这次没有写flightHandler这个函数呢？而且竟然也运行成功了！哈哈，这就是jQuery的功劳了，jquery在处理jsonp类型的ajax时（还是忍不住吐槽，虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用，是不是很爽呀？

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hd-yjs/39939.html