Vue Nginx反向代理配置解决生产环境跨域

爱被打了一巴掌 2022-10-20 05:24 252阅读 0赞

# Vue [本地代理][Link 1]编辑好后，能实现跨域获取接口数据，但是打包后在生产环境接口报错404，要怎样才能解决生产环境跨域问题呢？ #

在开发环境配置好本地代理后，使用Nginx反向代理解决生产环境跨域问题，Nginx反向代理配置非常简单，大概三步就能实现；

一、下载 Nginx

下载地址：[http://nginx.org/en/download.html][http_nginx.org_en_download.html]

打开如图所示：

[![8c0b56287cba163e0f92e2fefeff44e9.png][]][8c0b56287cba163e0f92e2fefeff44e9.png 1]

一般第一个是最新版，第二个是稳定版，点击最新版或者稳定版下载都可以；

二、修改配置文件

下载好nginx后就可以开始设置nginx的配置文件了，步骤如下图：

[![84350c2a8d1f44038daa3f5fb491d64d.png][]][84350c2a8d1f44038daa3f5fb491d64d.png 1]

新添加的代码：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

location /api {
                rewrite  ^.+api/?(.*)$ /$1 break;
                   include  uwsgi_params;
                proxy_pass   https://www.xxxxx.cn:444;#此处修改为自己的请求地址
            }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

三、把dist里的前端资源放到html文件夹

接着把打包好的vue文件复制过来，放到html文件夹就可以了，结构如下图：

[![7ae9753e5cbf126f14fdb2cc860db465.png][]][7ae9753e5cbf126f14fdb2cc860db465.png 1]

四、启动 Nginx

最后就是启动nginx，浏览器打开localhost(可在nginx配置修改)，来看看效果吧：

[![8d9f2ace25a8a117780ed77334f1f030.png][]][8d9f2ace25a8a117780ed77334f1f030.png 1]

接口数据获取成功，使用nginx反向代理解决vue生产环境跨域问题圆满解决；；

[Link 1]: https://www.cnblogs.com/elfpower/p/8794557.html
[http_nginx.org_en_download.html]: http://nginx.org/en/download.html
[8c0b56287cba163e0f92e2fefeff44e9.png]: /images/20221020/3311d145c1bf4e69a6543a5b42e64052.png
[8c0b56287cba163e0f92e2fefeff44e9.png 1]: https://images2018.cnblogs.com/blog/1356334/201806/1356334-20180614150459453-1754471665.jpg
[84350c2a8d1f44038daa3f5fb491d64d.png]: /images/20221020/069977a20f604a10b856c5c785f6205a.png
[84350c2a8d1f44038daa3f5fb491d64d.png 1]: https://images2018.cnblogs.com/blog/1356334/201806/1356334-20180614150924404-1980100514.jpg
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221020/129261f941bc476a879b9b915808887e.png
[7ae9753e5cbf126f14fdb2cc860db465.png]: /images/20221020/a588811b357a4e33942b27133e602ae6.png
[7ae9753e5cbf126f14fdb2cc860db465.png 1]: https://images2018.cnblogs.com/blog/1356334/201806/1356334-20180614151712162-2135887668.jpg
[8d9f2ace25a8a117780ed77334f1f030.png]: /images/20221020/366ff1960efe4a06ab565f9c69f61d17.png
[8d9f2ace25a8a117780ed77334f1f030.png 1]: https://images2018.cnblogs.com/blog/1356334/201806/1356334-20180614151853797-99167907.jpg