一、前言

由于身处于小团队，作为后台的，不得已参与到前端开发中。首先迎来的就是跨域的问题。
个人觉得使用 nginx 是一种较为简单直接彻底的办法

二、流程

1、请求后端数据失败

这里写图片描述
代码如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
        function upd() {
            $.ajax({
                type: "get",
                url: "http://120.79.197.130:8530/spring/user/get",
                success: function(result) {
                    console.log(result);
                }
            });
        }
    </script>

    <body>
        <!--获取-->
        <button id="btn2" onclick="upd()">Get request 获取</button>
    </body>

</html>

2、加入 nginx

nginx 的下载方法：nginx: download

1、在 conf/nginx.conf 中，很多都是默认配置，笔者把注释去掉，添加了自己少量的配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8888; # 任意
        server_name  localhost; 

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 新加的
        location /spring {
            proxy_pass   http://120.79.197.130:8530; # 后端接口 IP:port
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

2、点击这里写图片描述开启服务
3、修改代码上述 html 代码的 url

            $.ajax({
                type: "get",
                url: "/spring/user/get", // 注意链接
                success: function(result) {
                    console.log(result);
                }
            });

4、将代码文件放入 nginx 的 html 文件夹中（可以把里边的其他 html 删掉）
这里写图片描述
如下

5、基于 nginx 服务器，访问该 html 文件，可以看到，跨域请求，成功访问数据

三、配置 HBuilder 内置服务器为 nginx

问题来了，跨域请求虽然是成功了，但是每次编写完 html，都要放到 nginx/html 下才能正常跨域请求，是不是觉得有点麻烦
像 Sublime 直接以 nginx/html 为工作环境即可
像 webstorm、HBuilder 都有内置服务器，要怎么破？
笔者主要使用 HBuilder，支持国产 ~，下面以 HBuilder 为例
1、点击设置web 服务器
这里写图片描述
2、新建外置 web 服务器

内容可以如下示例：

3、使用自己配置的服务器取代默认的服务器

4、再以 nginx/html 为工作环境即可
最简单方法：
① 导入工程

选择再点击
以 nginx/html 下的目录

点击完成即可

四、小结

至此，没有所谓的跨域问题，且前端的开发环境依旧 ~
其他的编译器类似，不再多述

前端使用 Nginx 反向代理解决跨域问题、设置 HBuilder 内置服务器为 nginx 进行正常开发