前后端分离中碰到跨域问题大家是怎么解决的?


目前我在我的博客的时候,考虑到使用前后端分离,将前端和后端逻辑单独放在两个版本库,部署在两台服务器上。

我的主域名为: godtail.cn(目前使用ghost,新的博客正在写...)

  • 前端域名为: www.godtail.cn | godtail.cn | m.godtail.cn

  • 后端域名为: api.godtail.cn

但是在通信的时候发现,提示跨域了,好吧,我之前以为在主域名相同情况下不会跨域(同域名不同端口也会跨域)。

目前我知道的可以解决的方法有两种:

  1. 使用JSONP,说实在我不是特别喜欢使用JSONP,感觉会导致安全问题,或者效率下降(这两点仅是我的猜测)。
    猜测的理由:

    • 任何来源都能访问, 会不会存在js注入?

    • 后端和前端需要都JSONP进行处理。(写起来不爽,而且是所有请求都要使用JSONP)。

  2. 在后端添加跨域头

    • 如果前端域名比较多,需要添加很多域名,需要维护。如果别的系统需要请求你的接口,添加进跨域头?不好处理...

大家有没有更好一点的解决方法?

================【 9-22 17:25 】======================

补充下,设置跨域头,可以设置ip,仅供自己内部调用还是可以的。如果需要外部调用的话,就满足不了,另外不确定有没有老版本浏览器兼容问题。

=============== 【 9-29 17:39 】======================

补充下,后面碰到的问题吧,之前直接使用跨域头是可以正常GET和常规POST(表单方式)的,但是PUTDELETE,和Content-Type为application/json等, 需要再进行其他设置(预处理)。

具体MDN的CORS的文档看这里

代码, PHP为例:

header("Access-Control-Allow-Origin: xxx.com"); //允许的来源
//OPTIONS通过后,保存的时间,如果不超过这个时间,是不会再次发起OPTIONS请求的。
header("Access-Control-Max-Age: 86400"); 
//另外如果是OPTIONS头的话,需要返回200(通过验证)
header("Access-Control-Allow-Headers: Content-Type");
//允许的请求方式
header("Access-Control-Allow-Methods: OPTIONS, GET, PUT, POST, DELETE");

不想折腾的,直接反向代理到 xxx.com/api 下吧, 不会产生跨域问题,但是url不太美观就是。


楼上说的这个。可以指定访问的 地址吧~


我采用的第一种方式,jsonp,callback,要是这种请求多了,写起来也麻烦;
第二种方式,试了一下不好用啊,是在response上设置Access-Control-Allow-Origin..*?


nginx反向代理... 原来你自问自答了...


在服务器端设置头部 'Access-Control-Allow-Origin:*';


考虑下在后端添加跨域头,允许所有域名,然后在代码里过滤域名,不符合要求的域名直接返回 404。


  1. 自定义过滤器,在响应头中加跨域处理的项。

  2. 使用Nginx反向代理,同样也是为了在响应头中加跨域处理的项。

  3. 如果后端使用的是SpringMVC(当然是Java的),默认提供处理跨域的配置。


如果是用node 做中间服务渲染层,那么可以考虑http-proxy-middleware这个npm包,简单粗暴,能直接实现代理的问题,就像本地访问服务端一样的掉用服务端就好了!!


楼主我想问下 我最近也在尝试完全分离 PHP提供接口 但是如果以后App要调用接口怎么办


楼主基本已经把常用的两个思路方法写出来了,平时使用的比较多的也是这两个方法,或者是结合着来使用。至于提及到的jsonp的安全性问题目前来说感觉还是不会有太大问题的,之前也一直在使用这些方法解决产品中的问题。


跨域头不是可以写成正则的形式吗


在前端代码不输的服务器进行域名转发


当然是后端添加 Access-Control-Allow-Origin
至于你说的前端域名过多的问题,让后端用点小技巧能处理好的,不麻烦
思路:为 Access-Control-Allow-Origin 添加目标域名 (Origin 请求头) 而不是写死的域名或 *

大概实现 (伪代码):

// 允许跨域访问的域名数组
string[] allowOrigins = 
{
    "http://www.godtail.cn/", 
    "http://godtail.cn/", 
    "http://m.godtail.cn/",
};

// 判断 origin 是否是自己的前端域名,如果是则添加
if(allowOrigins.Count(x => x.Contains(Request.Headers["Origin"])) > 0)
    Response.Header.Add("Access-Control-Allow-Origin", Request.Headers["Origin"]);

不过话又说回来 请求头都是可以模拟的 所以建议将接口请求参数加密 前端脚本压缩混淆
参考网易云音乐的接口加密吧(去抓下包看看)



相关阅读:
阮一峰老师《ECMAScript 6入门》第一节中的疑问
定时器中this为什么会指向window
backbone排序问题,视图实时排序
vuex中的state值,在工具类模块中怎么获取?
怎样用yii2.0配合mongodb做后台的权限控制系统???
类方法里实现网络请求类单例的方法有些情况返回不了数据
mysql如何合并两张结构相同的数据表?
easyui1.5 datagrid中分页显示不正常,求教各位
API Gateway 或者 OpenAPI设计思想?
vue.js实现组件间的上移下移
新人小白问题之 什么时候需要用到form标签?什么时候不必用,用不用有什么区别?
Git出错 Fatal:multiple Stage Entriesfor Merged File
前端怎么实现关闭页面或浏览器后,重新打开页面或重启浏览器,可以继续原来的操作,比如重新打开后不需要重新调用后台的服务
flask 中的 template_rendered 函数
react map函数中点击事件失效
怎么检查一个checkbox是否存在?
为什么onmouseenter函数里面的i值为13?
iOS NSPredicate 过滤排序
有没有jenkins实现PHP工程的持续集成解决方案
怎么样阻止默认事件的出发(即验证不通过无法滑动?) 求大神!



快速导航

Copyright © 2016 phpStudy |