前端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文件中添加以下常用依赖

	4.0.0
	com.yardsale
	yardsale
	0.0.1-SNAPSHOT
	
	
		org.springframework.boot
		spring-boot-starter-parent
		2.1.6.RELEASE
		
		
	
	
		UTF-8
		1.8
	
	
		
		
			org.mybatis.spring.boot
			mybatis-spring-boot-starter
			1.1.1
		
		
		
			mysql
			mysql-connector-java
		
		
		
			org.springframework.boot
			spring-boot-starter-web
		
		
		
			org.springframework.boot
			spring-boot-starter-test
			
			test
		
		
		
			junit
			junit
			test
		
		
		
			org.springframework.boot
			spring-boot-devtools
			true
		
		
		
			org.springframework.boot
			spring-boot-starter-thymeleaf
		
		
		
			org.springframework.boot
			spring-boot-starter-aop
		
		
		
			org.springframework.boot
			spring-boot-starter-jta-atomikos
		
		
        
            com.alibaba
            druid
            1.1.10
        

		
			com.github.pagehelper
			pagehelper
			5.1.2
		

		
			org.apache.commons
			commons-lang3
			3.3.2
		

		
			com.alibaba
			fastjson
			1.1.23
		

		
			org.apache.shiro
			shiro-spring
			1.3.2
		
		
			org.apache.shiro
			shiro-ehcache
			1.3.2
		

		
		
			com.qcloud
			cos_api
			5.5.1
		

		
			com.google.code.gson
			gson
		
	

	
		
			
				src/main/java
				
					**/*.java
				
			
			
			
				src/main/resources
				
					**/*.*
				
				
			
		
	

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

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