如何解决前端跨域问题

发布 : 2018-12-09 分类 : 前端跨域 浏览 :

为什么会跨域?

​ 跨域主要是浏览器限制的,浏览器要求请求的url地址与当前的页面的url地址处于域名、端口号、协议一致,如果出现其中的一项不一致,则跨域。

​ 因为我现在做的项目是前后端分离的,所以会出现这个问题。

​ 先说一下我的服务器环境:centos7 + nginx,假设我的前端项目部署在服务器的http://100.100.100.100:80上,而后端项目部署在http://100.100.100.100:8080上,那么此时前端项目(80端口)请求服务器接口(8080端口)时,浏览器就会提示跨域,导致请求受限制。

解决方式:

方法一:通过设置后端的cors允许跨域

这种方式比较简单,需要配合后端实现,通过在后端设置cors允许跨域,可以指定ip,也可以用”*“允许全部.
以下是在koa2中允许跨域代码(不同的服务器框架或语言的跨域配置类似)

1
2
3
4
5
6
7
8
9
10
app.use(cors({
origin: function (ctx) {
return "*";
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE', 'PUT'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'accesstoken'],
}))

方法二:通过JsonP

JsonP的原理大概就是,利用浏览器对script加载完自动执行的特新来实现的。

比如前端有一段代码:

1
2
3
4
5
<script>
function handle(data){
console.log(data);
}
</script>

假设服务器接口名为 http://100.100.100.100/getData
该接口返回一个文件,文件内容为:

1
handle('数据。数据。数据。');

那么请看以下前端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<script>
function handle(data){
console.log(data);
}
</script>
<script>
var url = "http://100.100.100.100/getData";
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

​ 当第二个script里的代码执行完之后,第一个script里的handle就会被调用,此时输出'数据。数据。数据。'

​ 采用JsonP的过程比较繁琐,需要客户端和服务器端两端的同时配合,因此需要特别处理的接口可以使用,一般传统的后台接口不会采用这种方式进行跨域。

方法三:通过nginx反向代理

采用nginx反向代理能很好的实现跨域,目前我的项目就是采用的这种方式。

​ 先做以下假设:

​ 我的服务器域名为 www.simple.com ip为:100.100.100.100

​ 前端项目部署在100.100.100.100:80

​ 后端项目部署在100.100.100.100:8080

​ 那么为了实现跨域,我可以这么配置我的nginx。

https://www.simple.com => 100.100.100.100:80

https://www.simple.com/api => 100.100.100.100:8080

​ 当前端项目要请求接口的时候,可以通过https://www.simple.com/api进行请求,完美跨域。

本文作者 : Simple
原文链接 : https://simplecodecx.github.io/blog/20181209/8d45a80b.html
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
留下足迹