前端配置nginx反向代理解决跨域

前言：做前端的同学都知道跨域问题是个常见的现象，当前端请求后台接口的时候，浏览器就会发起跨域判断，出于安全策略，具体什么情况下会出现跨域的情况，大家可以百度，新手童鞋请绕行！

解决前端跨域方法有：
1，JSONP
2，通过修改document.domain来跨子域
3，使用window.name来进行跨域
4，HTML5中的window.postMessage方法来跨域传送数据
5，node中间件
6，nginx（重点介绍）

如同主题一样，今天主要讲的在前端nginx来解决跨域问题，脱离后台童鞋配合；

（一）安装nginx（百度或者运维协助）
截止到2018年12月份 nginx目前占有30%多的市场，常用的场景：
正向代理
反向代理
HTTP服务
负载均衡

正向代理与反向代理的区别：
正向代理：
假设用户A要访问服务器C，但是因为网络原因或者其他原因导致无法访问；但是服务器B可以访问服务器C。这样用户A可以把服务器B设置为正向代理服务器。由服务器B去请求服务器C，然后服务器B把数据返回给用户A；

反向代理：
用户需要访问一些服务器应用，但是不想把服务器应用地址暴露给用户，这样可以确保安全。我们可以通过反向代理服务器，用户只需知道反向代理服务器地址就可以，最后由反向代理服务器去访问服务器的应用。

由此我们可知：
两者区别如下：

（a）正向代理是需要在用户的电脑上配置正向代理服务器的；而反向代理不需要，因为用户是直接访问的反向代理服务器。

（b）正向代理，用户可以知道目标服务器地址；反向代理，用户不知道目标服务器地址；

（c）反向代理 更加安全，保护了应用的安全性，而且此结构可以很好的搭建负载均衡；

（二）常用nginx语法

./nginx -t // 检查语法是否正确
./nginx -s reload // 重启服务
// 停止-有三种方式
// 1，从容停止
ps -ef|grep nginx  查看进程号
kill -QUIT xxxx    杀死进程

// 2,快速停止
ps -ef|grep nginx  查看进程号
kill -TERM xxxx
//或者 kill -INF xxxx

// 3,强制停止
pkill -9 nginx

（三）文件配置相关
例如：
前端域名：https://tecwan.com
后台接口：https://cofmao.com/api/user

我们需要配置nginx的文件中重写请求地址后是：https://tecwan.com/api/user
这样就解决了跨域问题???

以vue中axios 请求后台接口为例：
axios经过封装，可忽略封装方式

	// 原后台接口url为 https://cofmao.com/api/user，这里我们把url写成
	// url = '/reapi/api/user'----所以nginx配置文件中就要拦截以为'/reapi'开头的请求
	let url = '/reapi/api/user'
      this.$http.post(url, repData).then(
        success => {

        },
        fail => {

        }
      );

服务端nginx配置：

server {
        listen       80; #默认监听80端口
        server_name  localhost; # 当前服务的域名-可配置
        location / {
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }

	location /reapi { # 
			rewrite  ^/reapi/(.*)$ /$1 break;
			proxy_pass   https://cofmao.com;
       }
}

rewrite ^/reapi/(.*)$ /$1 break;
之上代表重写拦截进来的请求，并且只能对域名后边以“/reapi”开头的进下拦截；
例如 https://cofmao.com/reapi/api/user?name=andy 重写，但是只对/repai重写

如有问题，请留意！ths

另，域名售卖中：
tecwan.com
cofmao.com
to618.com