如何解决前端跨域问题

时间 2019-11-22 标签如何解决前端问题

为何会跨域?

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

由于我如今作的项目是先后端分离的，因此会出现这个问题。前端

先说一下个人服务器环境：centos7 + nginx，假设个人前端项目部署在服务器的http://100.100.100.100:80上，然后端项目部署在http://100.100.100.100:8080上，那么此时前端项目（80端口）请求服务器接口（8080端口）时，浏览器就会提示跨域，致使请求受限制。nginx

解决方式：后端

方法一：经过设置后端的cors容许跨域

这种方式比较简单,须要配合后端实现,经过在后端设置cors容许跨域，能够指定ip,也能够用"*"容许所有. 如下是在koa2中容许跨域代码（不一样的服务器框架或语言的跨域配置相似）centos

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加载完自动执行的特新来实现的。api

好比前端有一段代码：跨域

<script>
    function handle(data){
        console.log(data);
    }
</script>
复制代码

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

handle('数据。数据。数据。');
复制代码

那么请看如下前端代码：bash

<!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。

www.simple.com => 100.100.100.100:80

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

当前端项目要请求接口的时候，能够经过https://www.simple.com/api进行请求，完美跨域。