前后端分离开发部署的跨域问题
程序员文章站
2022-07-10 16:10:48
...
目前我自己知道的有3中方案
第一种:利用jsonp来解决跨域请求
这种方式本质上是利用html标签的src属性去实现,但这种方式有一定的局限性。因为src加载资源是GET请求,一些POST请求无法实现,如上传文。当然上传文件也可以通过Base64编码转化成字符串,然后再拼接到URL上,但URL长度是有限制的,所以一些大文件是无法通过这种方式来解决
第二种:利用中间件(如nginx)进行代理转发
如下图:
这样的话 对于浏览器来说,就是同一个域,也就不存在跨域的问题了。当然如果代理使用nginx的话,完全可以将静态资源直接发布至nginx。
这种架构优势在于
1、开发的时候完全可以不考虑跨域的问题
2、流量有统一的入口,可以统一进行的流量管理
劣势在于 : 代理服务器流量压力较大
第三种:通过设置响应头信息,解决跨域问题:
//解决请求跨域 http://xxx.xxx:为前端服务器的域
response.setHeader("Access-Control-Allow-Origin", "http://xxx.xxx");
//解决session存储问题
response.setHeader("Access-Control-Allow-Credentials","true");
前台页面用ajax异步请求的时候 注意要加上 xhrFields:{withCredentials:true} 参数,因为异步请求时js对象发起请求,默认情况是不保存cookie的,加上这个参数,可以让浏览器保存cookie
推荐阅读
-
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
-
详解VueJs前后端分离跨域问题
-
springboot解决前后端分离时的跨域问题
-
vue+springboot前后端分离实现单点登录跨域问题解决方法
-
vue2 前后端分离项目ajax跨域session问题解决方法
-
开发中解决Access-Control-Allow-Origin跨域问题的Chrome神器插件,安装及使用
-
web开发的跨域问题详解
-
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
-
前后端分离cors解决跨域问题
-
【spring boot】https 前后端分离 跨域请求爬的坑