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

已经没有跨域问题了。

三、开发环境解决跨域

nginx一般是用来在生产版本部署时才用到，在开发环境中，可以使用其他的更简便的方法

vue.js项目开发模式跨域设置：在config下的index.js文件中配置proxyTable。

未完待续。。。

最后编辑于：2018.08.03 09:04:10