vue前后端分离项目部署,Nginx、Apache反向代理配置详解,配置反向代理解决跨域问题

1,253次阅读
一条评论

vue前后端分离项目部署,vue前后端分离项目必然会出现前后端不同域而跨域的问题,当然,你可以在前端拼接目标域并在后端处理好跨域,但更优雅的方式是给Nginx/apache配置反向代理

Apache部署:

部署步骤:

  1. 把npm run build 构建生产的文件(dist目录里的所有文件)拷贝到服务器的某目录下;
  2. 在apache的配置文件httpd.conf里添加一个虚拟主机(这个很简单,可以参考下面示例的VirtualHost标签之间的类容);
  3. apache配置路由重写(没有这步vue项目在非/路由下刷新页面会产生404错误);
  4. apache配置反向代理(配置了这个你的项目就可以直接通过开发环境的代码构建部署,并且不用处理跨域问题);
  5. 重启apache,开始访问你的项目。

Apache路由重写和反向代理配置:

我这里是win环境,apache是wampserver里集成的。

给个例子:

我这里前端通过localhost:8088访问,后端服务在localhost:8086上。我的项目了/api 和/_api路由是后端的,所以需要将localhost:8088/api|_api路由代理到localhost:8086/api|_api。

先打开httpd.conf配置文件确认以下下模块是否开启:

(对照下面的内容去掉相应模块前面的#注释符)

LoadModule negotiation_module modules/mod_negotiation.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule rewrite_module modules/mod_rewrite.somod_slotmem_shm.so

然后再文件末尾加上如下内容(DocumentRoot和Directory根据自己的项目路径修改):

<VirtualHost *:8088>
    ServerName localhost:8088
    ServerAlias localhost:8088

    DocumentRoot ${INSTALL_DIR}/www/path/to/dist
    <Directory ${INSTALL_DIR}/www/path/to/dist>
      Options +Indexes +Includes +FollowSymLinks +MultiViews
      AllowOverride All
      Require local
      
      # 路由重写 没有这句vue项目在非/路由下刷新页面会产生404错误
      FallbackResource /index.html
    </Directory>

    # 关掉正向代理
    ProxyRequests Off
    
    <Proxy *>  
        Order deny,allow  
        Allow from all  
    </Proxy>  
    
    # 反向代理配置
    ProxyPass /api http://127.0.0.1:8086/api
    ProxyPass /_api http://127.0.0.1:8086/_api

    # 反向代理重定向配置
    # 如果响应报文的Header中有Location(3xx指定重定向的URL)或Content-Location(指定多个URL指向同一个实体),则使用请求报文中HOST替换URL中的HOST部分。
    ProxyPassReverse /api http://127.0.0.1:8086/api
    ProxyPassReverse /_api http://127.0.0.1:8086/_api
</VirtualHost>

重启apache,配置完成。

更多内容建议参考apache官网文档。

Nginx部署:

不少人用的可能是ningx服务器,nginx部署vue步骤和上面基本相同、这里说下nginx的伪静态和反向代理配置

伪静态:

location / {
    try_files $uri $uri/ /index.html?$args ;
}

反向代理:

location ^~ /api {
        index index.html index.htm index.php;
        proxy_pass  http://127.0.0.1:8086;           
    }

这样,访问到 /api 这个路由的请求就被代理到::8086/api了,如果还有其他路由需要被代理添加location就行。

 

facingscreen
版权声明:本站原创文章,由 facingscreen2022-03-16发表,共计1949字。
转载说明:本文为搜栈网原创文章,除特殊说明外皆由CC-4.0协议发布,转载请注明出处。
评论(一条评论)
验证码
facingscreen 博主
2022-04-12 11:28:33 回复

el-divider content-position=”right” // element-ui分割线

WindowsWindowsEdgeEdge100.0.1185.36