前端vue+后端springboot前后端分离解决跨域问题（Windows环境下）

1，创建vue项目（前提：已安装node）

#全局安装vue-cli

npm install --global vue-cli

#创建vue项目

vue init webpack demo1

#进入项目路径安装依赖

cd demo1

npm install

PS:由于npm默认镜像是外网的（https://registry.npmjs.org/），所以比较慢，可以切换为国内taobao镜像，相关命令如下：

#查看npm

npm get registry

#切换镜像地址

npm config set registry http://registry.npm.taobao.org/

2，vue项目中配置代理规则，如下图

proxyTable: {
  '/api': {
    target: "http://127.0.0.1:10002",
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

图片代码解释：将URL前缀为"api"的URL代理到指定的URL，如http://127.0.0.1:10002

访问接口示例：最终“api/test”被代理到http://127.0.0.1:10002/api/test

3，创建springboot项目并提交接口

 创建maven项目，在pom.xml文件中添加以下常用依赖

<project xmlns="http://maven.apache.org/POM/4.0.0"
		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.yardsale</groupId>
	<artifactId>yardsale</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<!-- 公共spring-boot配置，下面依赖jar文件不用在写版本号 -->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.6.RELEASE</version>
		<!-- 表示父模块pom的相对路径，这里没有值 -->
		<relativePath/>
	</parent>
	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<java.version>1.8</java.version><!-- 指定jdk版本 -->
	</properties>
	<dependencies>
		<!-- 引入mybatis -->
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>1.1.1</version>
		</dependency>
		<!-- 添加数据库链接驱动 -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<!-- web -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!-- 测试 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<!-- 只在test测试里面运行 -->
			<scope>test</scope>
		</dependency>
		<!-- junit支持 -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<scope>test</scope>
		</dependency>
		<!-- 热部署 （可以进行集成测试） -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>
		<!-- springboot建议我们全部用.html页面并配置上thymeleaf模板来替代jsp页面，这种文件一般需要通controller来进行跳转。 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<!-- 引入aop的包 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
		<!-- 用于分布式事务管理，使用的是jta-atomikos -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jta-atomikos</artifactId>
		</dependency>
		<!--数据库连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.10</version>
        </dependency>

		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>5.1.2</version>
		</dependency>

		<dependency>
			<groupId>org.apache.commons</groupId>
			<artifactId>commons-lang3</artifactId>
			<version>3.3.2</version>
		</dependency>

		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.1.23</version>
		</dependency>

		<dependency>
			<groupId>org.apache.shiro</groupId>
			<artifactId>shiro-spring</artifactId>
			<version>1.3.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.shiro</groupId>
			<artifactId>shiro-ehcache</artifactId>
			<version>1.3.2</version>
		</dependency>

		<!--COS-->
		<dependency>
			<groupId>com.qcloud</groupId>
			<artifactId>cos_api</artifactId>
			<version>5.5.1</version>
		</dependency>

		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
		</dependency>
	</dependencies>

	<build>
		<resources>
			<resource>
				<directory>src/main/java</directory>
				<excludes>
					<exclude>**/*.java</exclude>
				</excludes>
			</resource>
			<!--以下配置使得mapper.xml文件会被加载到classes中，不然Mybatis会报错-->
			<resource>
				<directory>src/main/resources</directory>
				<includes>
					<include>**/*.*</include>
				</includes>
				<!--<filtering>false</filtering>-->
			</resource>
		</resources>
	</build>

</project>

创建controller并提供接口，如下图：

    启动springboot项目，并运行命令“npm run dev ”启动vue项目，访问成功