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页面中,然后再根据后面的路由及参数,由页面进行处理。

Logo

前往低代码交流专区

更多推荐