springmvc + vue 的前后端项目分开部署（解决跨域请求问题）

1.跨域请求问题

       由于前后台项目分开部署，因此必然会产生跨域请求的问题。本文解决跨域请求问题的主要方式是通过后台的配置，前台不做代理操作，只进行简单的传输类型的设置。后台配置参考了1中的方式。具体如下。

1.1 后台配置

       首先在web.xml文件里添加如下内容。

    <!--配置允许跨域访问-->
    <!--CORS 跨域资源访问-->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

       在pom.xml添加类的依赖

    <!-- 跨域 -->
    <!-- https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter -->
    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>cors-filter</artifactId>
      <version>2.6</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils -->
    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>java-property-utils</artifactId>
      <version>1.9.1</version>
    </dependency>

1.2 前台配置

       在前台我只做了简单的配置，不写也没关系

  // 配置axios进行跨域操作
  const axiosInstance = axios.create({
        headers:{'Content-Type':'application/json;charset=utf-8'},    // 设置传输内容的类型和编码
        withCredentials:true    
    });
  // 发送跨域请求
  getAxios:function() {             
                axiosInstance.get('http://192.168.155.111:8080/demo/paint.do',{params:{id:3}})
                    .then(function (value) {
                    })
                    .catch(function (reason) {
                    })
            },

2.使用tomcat发布后台项目

       tomcat的部署大家应该都很熟悉，跳过此部分

2.1 后台项目的打包

       本文使用IDEA 来进行MAVEN项目的打包。打开maven项目，点击右侧菜单栏maven projects。点击lifecyle->package->run。打包时先停止运行该项目。

       之后IDEA会自动帮我进行打包。打包成果如下图所示。同时也会显示打包成功的war包存储路径。

2.2 tomcat部署该项目

       将该war包放到tomcat的webapps文件夹下，我们可以根据需求自定义war包名称。然后修改tomcat中的serve.xml文件，将红框内容修改成我们的war包名称。

        最后启动通过bin文件夹的startup.bat脚本启动tomcat即可。访问服务器的路径为：

  本地IP：tomcat端口（详见配置文件）/webapp下war包名称

       需要注意一点的是，如果我们多次部署同一个项目的时候，在替换war包的同时，要删除tomcat自动解压缩的同名文件夹。否则tomcat不会自动处理新替换的war包。

3. 前端项目的部署

       本文中，前端项目的部署工具是nginx，安装过程不讲了。如果出现端口80占用问题，可以通过修改注册表解决。

3.1 前台项目的打包

       前台项目使用npm命令打包。进入项目路径，敲入如下命令。

 # npm run build

查看项目目录，可以发现新生成了一个文件夹。

3.2 通过nginx发布项目

       修改nginx/conf/nginx.conf配置文件（将扩展名改成txt进行修改）。

进入nginx的安装目录输入如下命令启动nginx(windows下）

start nginx

       之后，便可以通过localhost：8081(或者本机ip)进行访问。结果如下如所示，访问没有错误，跨域请求也被正确处理。

4.总结

       本文介绍了基于SpringMVC的后台项目和基于Vue的前端项目的分开部署，以及如何此过程中产生的跨域请求问题。tomcat和nginx的相关操作省略，不知道如何操作的读者可以自行百度。

巨人

1.跨域请求
https://blog.csdn.net/wxb880114/article/details/80606434
2.项目打包
https://blog.csdn.net/u012679583/article/details/72571227
3. nginx发布项目
https://www.cnblogs.com/mao2080/p/9340026.html