问

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

郭彩凤da 发布于 2022-11-30 19:18

服务器

api

json

安全

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

我的主域名为: godtail.cn（目前使用ghost，新的博客正在写...）

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

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

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

使用JSONP，说实在我不是特别喜欢使用JSONP，感觉会导致安全问题，或者效率下降（这两点仅是我的猜测）。
猜测的理由：
- 任何来源都能访问, 会不会存在js注入？
- 后端和前端需要都JSONP进行处理。（写起来不爽，而且是所有请求都要使用JSONP）。
在后端添加跨域头
- 如果前端域名比较多，需要添加很多域名，需要维护。如果别的系统需要请求你的接口，添加进跨域头？不好处理...

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

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

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

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

补充下，后面碰到的问题吧，之前直接使用跨域头是可以正常GET和常规POST（表单方式）的，但是PUT和DELETE,和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不太美观就是。

12 个回答

当然是后端添加 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"]);
```
不过话又说回来请求头都是可以模拟的所以建议将接口请求参数加密前端脚本压缩混淆
参考网易云音乐的接口加密吧（去抓下包看看）
2022-11-30 19:26 回答

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

2022-11-30 19:26 回答

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

2022-11-30 19:26 回答

伤心的海2012_626
在服务器端设置头部 'Access-Control-Allow-Origin:*';

2022-11-30 19:26 回答

老6李家小宝
楼上说的这个。可以指定访问的地址吧~

2022-11-30 19:26 回答

没有性欲的机器猫
在前端代码不输的服务器进行域名转发

2022-11-30 19:26 回答

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

2022-11-30 19:26 回答

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

2022-11-30 19:26 回答

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

2022-11-30 19:26 回答

搜狐搜不到你的爱_276
1. 自定义过滤器，在响应头中加跨域处理的项。
2. 使用Nginx反向代理，同样也是为了在响应头中加跨域处理的项。
3. 如果后端使用的是SpringMVC（当然是Java的），默认提供处理跨域的配置。
2022-11-30 19:26 回答

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

2022-11-30 19:26 回答

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

2022-11-30 19:26 回答

yushun

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签