利用nginx解决vue的跨域访问问题

        vue在开发中，可以通过自带的脚手架配置实现跨域访问，但是打包时不会将这部分配置文件载入，这样会导致上了生产环境出现跨域访问的问题。在网上查过一些解决跨域的问题，都没太搞明白，然后就想采用nginx将服务请求转发来实现，经过一天的摸索，终于搞定了。

        最开始的的nginx配置如下：

server {
        listen       80;
        server_name  abc.def.com;
        index index.html;
        location /  {
            root /usr/share/nginx/html/app;
        }

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

        这个配置是将所有访问“abc.def.com”的请求都转发到对应的路径下，然后请求服务的链接为：http://w.xyz.com/projectname/rs/service/servicename(采用resteasy开发的Java服务)，就会产生跨域问题。

        之前解决过一次跨域问题，就是将vue的代码放到java工程的WwbRoot目录下，请求链接将前缀去掉，改为：/projectname/rs/servicename，这样因为成了本地请求，就避免了跨域访问。

        然后基于以上两点，将nginx进行改造，如下：

server {
        listen       80;
        server_name  abc.def.com;
        index index.html;
        location ~ (/static/|index.html)  {
            root /usr/share/nginx/html/app;
        }
        location ~ /projectname/ {
            proxy_pass   http://w.xyz.com;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

        将之前的location进行改造，规定只有访问前缀是/static/或者index.html这两种情况，才会转发到本地的vue目录下，保证了前端可以正常访问页面。

        然后新增一个location，规定/projectname/开头的的请求，会被转发到http://w.xyz.com这个地址。

        这样就实现了vue的跨域访问了。

        补充一点，上面这种配置有一个弊端，就是遇到链接中带参数的、或者采用vue路由模式跳转的页面，直接访问是无法打开的。比如：

        http://abc.def.com/news?param1=1000&param2=16919

        这种情况因为news是一个路由，按照第二种配置，只有static和index.html才会被转发，会导致这种情况报404错误

        所以需要改为如下配置：

    server {
        listen       80;
        server_name  abc.def.com;
        index index.html;
        location ~ /projectname/ {
            proxy_pass   http://w.xyz.com;
        }
        location / {
            root /usr/share/nginx/html/app;
            try_files $uri /index.html;
        }

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

        将服务跳转的location放在第一位，这样按照顺序匹配，先将服务请求进行转发，然后将剩余的所有请求均转发到本地vue目录，还需要增加try_files $uri /index.html;这句话大致是说，不管什么路径请求，都会转发到index.html页面中，然后再根据后面的路由及参数，由页面进行处理。