Nginx解决vue项目服务器部署及跨域访问后端详解

 更新时间:2022年11月08日 11:01:36   作者:紫米粥  
跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,这篇文章主要给大家介绍了关于Nginx解决vue项目服务器部署及跨域访问后端的相关资料,需要的朋友可以参考下

准备

(1)首先是一个Vue项目。

(2)其次准备好服务器(在这里我是用虚拟机VMware)。

(3)准备好一个SpringBoot后端代码。

(4)服务器上必须安装Nginx。

1、前端代码注意事项:

(1)在这里我是用vuecli3脚手架创建的vue项目的,所以项目创建完毕之后是没有vue.config.js的。

其实这个文件的创建是为了本地测试解决前后端跨域问题的,但是在打包项目的时候需要把这里关于跨域的代码需要注释。

// vue.config.js

module.exports = {
    publicPath: './',
    runtimeCompiler: true,
    // devServer:{
    //     port:83,
    //     proxy:{
    //         '/api':{
    //             target:"http://localhost:8086",
    //             changOrigin: true,  //允许跨域
    //             pathRewrite:{
    //                 '^/api':''  //重写路径
    //             }
    //         }
    //     }
    // }
}

(2)第二点前端配置的请求路径需要加一个前缀,用于nginx的路由转发:

import axios from "axios";
const request = axios.create({
    // baseURL: 'http://localhost:8086',  //  注意!!  这里是全局统一加上了  '/api'  前缀,也就是说所有的接口都会加上'/api'前缀名
    // timeout: 5000
    //利用nignx解决跨域问题
    baseURL: '/api',  //  注意!!  这里是全局统一加上了  '/api'  前缀,也就是说所有的接口都会加上'/api'前缀名
    timeout: 5000
})
export default request;

(3)第三点需要改一下路径地址,配置路由和组件之间的关系,配置成Hash路由模式。

(4)基本上到这里然后控制台npm run build 一下就可以了!!

(5)将dist文件夹的文件上传到Nginx中。

2、虚拟机的Nginx配置关键点:

重要的一点,全程都要以root账户进行操作,输入su root ,然后输入密码即可进行root权限。

(1)Nginx结构目录:

(2)在这里我们要把前端打包好的代码dist下面的文件通过第三方软件上传到了index中了。

(3)这时候开始配置cong中的nginx.conf文件,vim nginx.conf。

(4)修改配置文件:具体如图所示,在这里注意proxy_pass http://之后的地址加你自己电脑的IP地址加上相应的后端的端口号。

举个例子:假设这里我本机的IP地址为192.168.12.1,SpringBoot的端口号为8081,那么请求地址为proxy_pass http://192.168.12.1:8081/;

如何查看本机的Ip地址呢?找到window10左下角输入cmd,然后输入ipconfig,就可以查看了。

(5)还有很重要的一点,要关闭Linux的防火墙,我这里是centos7.6,所以在命令行要输入systemctl stop firewalld.service。

到这里的话,把后端的项目跑起来,虚拟机上的Nginx运行起来,项目就可以正常访问了!!!

测试

(1)访问服务器中的前端文件

(2)前端文件请求,然后通过Nginx转发到后端。

(3)后端接受请求,给予前端反馈。

总结 

到此这篇关于Nginx解决vue项目服务器部署及跨域访问后端的文章就介绍到这了,更多相关Nginx解决vue项目服务器部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Nginx解决转发地址时跨域的问题

    Nginx解决转发地址时跨域的问题

    这篇文章主要介绍了Nginx实现转发地址解决跨域问题的方法,文中介绍的很详细,对大家的学习具有一定的参考借鉴价值,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • nginx 伪静态化rewrite规则

    nginx 伪静态化rewrite规则

    用Nginx的朋友可以参考,加到nginx.conf相应主机server段配置中即可!
    2009-10-10
  • Windows下使用Nginx+Tomcat做负载均衡的完整步骤

    Windows下使用Nginx+Tomcat做负载均衡的完整步骤

    这篇文章主要介绍了Windows下使用Nginx+Tomcat做负载均衡的完整步骤,帮助大家搭建负载均衡集群,感兴趣的朋友可以了解下
    2020-09-09
  • 配置ab来为Nginx服务器做压力测试的方法

    配置ab来为Nginx服务器做压力测试的方法

    这篇文章主要介绍了配置ab来为Nginx服务器做压力测试的方法,ab是针对Apache的测试工具但本文讲解其测试Nginx的过程,需要的朋友可以参考下
    2016-01-01
  • 使用nginx+tomcat+keepalived实现高可用的详细步骤

    使用nginx+tomcat+keepalived实现高可用的详细步骤

    这篇文章主要介绍了nginx+tomcat+keepalived实现高可用,包括安装nginx服务的步骤,详细介绍了安装keepalived的方法,对nginx+tomcat+keepalived高可用相关知识感兴趣的朋友一起看看吧
    2022-03-03
  • nginx 504 Gateway Time-out错误解决方法

    nginx 504 Gateway Time-out错误解决方法

    我们经常会发现大量的nginx服务器访问时会提示nginx 504 Gateway Time-out错误了,下面我来总结了一些解决办法,有需要了解的同学可进入参考
    2014-11-11
  • nginx中使用nginx-http-concat模块合并静态资源文件

    nginx中使用nginx-http-concat模块合并静态资源文件

    这篇文章主要介绍了nginx中使用nginx-http-concat模块合并静态资源文件,用以加速网站的CSS、JS等静态资源载入速度,需要的朋友可以参考下
    2014-06-06
  • Nginx服务LNMP之WordPress部署流程步骤

    Nginx服务LNMP之WordPress部署流程步骤

    这篇文章主要为大家介绍了Nginx服务LNMP之WordPress部署流程步骤,本实验意在部署过程,使用单机版部署,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-03-03
  • nginx反向代理导致session失效的问题解决

    nginx反向代理导致session失效的问题解决

    这篇文章主要介绍了nginx反向代理导致session失效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • nginx lua集成kafka的实现方法

    nginx lua集成kafka的实现方法

    这篇文章主要介绍了nginx lua集成kafka的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论