javascript - 前后端分离中碰到跨域问题大家是怎么解决的?
我的主域名为: godtail.cn
(目前使用ghost
,新的博客正在写...)
前端域名为:
www.godtail.cn
|godtail.cn
|m.godtail.cn
后端域名为:
api.godtail.cn
但是在通信的时候发现,提示跨域
了,好吧,我之前以为在主域名相同情况下不会跨域(同域名不同端口也会跨域)。
目前我知道的可以解决的方法有两种:
-
使用JSONP,说实在我不是特别喜欢使用JSONP,感觉会导致安全问题,或者效率下降(这两点仅是我的猜测)。
猜测的理由:任何来源都能访问, 会不会存在js注入?
后端和前端需要都JSONP进行处理。(写起来不爽,而且是所有请求都要使用JSONP)。
-
在后端添加跨域头
如果前端域名比较多,需要添加很多域名,需要维护。如果别的系统需要请求你的接口,添加进跨域头?不好处理...
大家有没有更好一点的解决方法?
================【 9-22 17:25 】======================
补充下,设置跨域头,可以设置ip,仅供自己内部调用还是可以的。如果需要外部调用的话,就满足不了,另外不确定有没有老版本浏览器兼容问题。
回复内容:
目前我在我的博客的时候,考虑到使用前后端分离,将前端和后端逻辑单独放在两个版本库,部署在两台服务器上。
我的主域名为: godtail.cn
(目前使用ghost
,新的博客正在写...)
前端域名为:
www.godtail.cn
|godtail.cn
|m.godtail.cn
后端域名为:
api.godtail.cn
但是在通信的时候发现,提示跨域
了,好吧,我之前以为在主域名相同情况下不会跨域(同域名不同端口也会跨域)。
目前我知道的可以解决的方法有两种:
-
使用JSONP,说实在我不是特别喜欢使用JSONP,感觉会导致安全问题,或者效率下降(这两点仅是我的猜测)。
猜测的理由:任何来源都能访问, 会不会存在js注入?
后端和前端需要都JSONP进行处理。(写起来不爽,而且是所有请求都要使用JSONP)。
-
在后端添加跨域头
如果前端域名比较多,需要添加很多域名,需要维护。如果别的系统需要请求你的接口,添加进跨域头?不好处理...
大家有没有更好一点的解决方法?
================【 9-22 17:25 】======================
补充下,设置跨域头,可以设置ip,仅供自己内部调用还是可以的。如果需要外部调用的话,就满足不了,另外不确定有没有老版本浏览器兼容问题。
当然是后端添加 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"]);
不过话又说回来 请求头都是可以模拟的 所以建议将接口请求参数加密 前端脚本压缩混淆
参考网易云音乐的接口加密吧(去抓下包看看)
考虑下在后端添加跨域头,允许所有域名,然后在代码里过滤域名,不符合要求的域名直接返回 404。
nginx反向代理... 原来你自问自答了...
在服务器端设置头部 'Access-Control-Allow-Origin:*';
楼上说的这个。可以指定访问的 地址吧~
在前端代码不输的服务器进行域名转发
跨域头不是可以写成正则的形式吗
我采用的第一种方式,jsonp,callback,要是这种请求多了,写起来也麻烦;
第二种方式,试了一下不好用啊,是在response上设置Access-Control-Allow-Origin..*?
上一篇: mysql如何查询一天内的数据
下一篇: 分享php登录页面跳转的实现思路