nginx反向代理-解决前端跨域问题
前后端分离现在已成主流系统架构设计方式，后台和前台页面分开部署，以便后期维护和扩展，对运维工作十分有利，不会出现因为后台崩溃而导致前台页面访问不了的情况。但是随之而来的就会产生跨域问题。
一、跨域的定义
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
1.1域名：
主域名不同:
http://www.fengleaf.cn/experience
http://www.sina.cn/experience
子域名不同:
http://www.ad.fengleaf.cn/experience
http://www.movie.fengleaf.cn/experienc
域名和域名ip:
http://www.baidu.com/index.html
http://180.149.132.47/test.js
1.2端口：
http://www.fengleaf.cn:8080/index.html
http://www.fengleaf.cn:8081/index.html
1.3协议：
http://www.fengleaf.cn
https://www.fengleaf.cn
备注：
1、端口和协议的不同，只能通过后台来解决
2、localhost和127.0.0.1虽然都指向本机，但也属于跨域
示例
前端node服务域名地址：http://localhost:3000
后端接口请求域名地址：http://www.fengleaf.cn/api~
在前端index.html中获取后台接口数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跨域</title>
<script src="./jquery.js"></script>
</head>
<body>
<a id="linkBtn">获取接口服务数据</a>
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
<script>
$('#linkBtn').click(function () {
$.ajax({
url:'http://www.fengleaf.cn/api/skills',
type: 'get',
success: function (data) {
var result = JSON.stringify(data);
$("#text").val(result);
}
})
})
</script>
</body>
</html>
会发现直接拿“http://www.fengleaf.cn/api/skills”请求数据，浏览器报错，产生跨域问题：
image.png
二、nginx反向代理解决跨域
1、找到Nginx更目录下的nginx.conf文件，在http对象中添加一个sever，内容如下：
http: {
server{
listen 9000;
server_name localhost;
location / {
proxy_pass http://127.0.0.1:3000/;
}
location /apis {
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://www.fengleaf.cn;
}
}
}
修改完成后执行：sudo nginx -s reload，重新启动Nginx服务
nginx常用命令：
开启nginx服务
sodu nginx 服务器重启命令，关闭
sudo nginx -s reload ：修改配置后重新加载生效
关闭nginx：
sudo nginx -s stop :快速停止nginx
sudo quit ：完整有序的停止nginx
配置解释：
1.由配置信息可知，我配了一个端口代理，将3000端口代理到了9000端口，这样网站前端页面就可经过localhost的9000端口进行访问，也能使用3000端口访问。
2.我们特殊配置了一个“/apis”目录的访问，并且对url执行了重写，最后使以“/apis”开头的地址都转到“http://www.fengleaf.cn”进行处理。
3.rewrite ^/apis/(.)/1 break; 代表重写拦截进来的请求，并且只能对域名后边以“/apis”开头的起作用，例如www.a.com/apis/msg?x=1重写。只对/apis重写。
rewrite后面的参数是一个简单的正则 ^/apis/(.),1代表正则中的第一个(),$2代表第二个()的值,以此类推。break代表匹配一个之后停止匹配。
2、更改ur路径
既然配置了nginx，那么所有的访问都要走nginx，而不是走网站原本的地址。所以要修改前端页面的ajax访问地址，把访问地址由
“http://www.fengleaf,cn/api/skills”改成“/apis/api/skills”。如下代码：
$('#linkBtn').click(function () {
$.ajax({
url: '/apis/api/skills',
type: 'get',
success: function (data) {
var result = JSON.stringify(data);
$("#text").val(result);
}
})
})
浏览器输入localhost:9000，点击按钮发起请求:
image.png
image.png
已经没有跨域问题了。
三、开发环境解决跨域
nginx一般是用来在生产版本部署时才用到，在开发环境中，可以使用其他的更简便的方法
vue.js项目开发模式跨域设置：在config下的index.js文件中配置proxyTable。
未完待续。。。
