SpringBoot + Vue + Tomcat 项目

项目中，后端是jar打包方式的springboot，前端是tomcat+vue。不同的端口，有跨域问题。这里总结了项目中解决跨域问题的经验。

SpringBoot

虽然springboot有多种方式解决跨域问题，但由于springboot是采用了jar打包方式，这里就采用了@CrossOrigin注解的方式解决后端程序的跨域访问。

@RequestMapping("/api")
@RestController
public class UserController{
	@CrossOrigin(origins = "http://192.168.1.10:8090")
	@GetMapping("/check")
	public String checkUser(){
	}
}

Tomcat

    <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.supportsCredentials</param-name>   
            <param-value>false</param-value>   
        </init-param>    
    </filter>    
    <filter-mapping>    
        <filter-name>CORS</filter-name>    
        <url-pattern>/*</url-pattern>    
   </filter-mapping>

Vue

Vue中使用Axios完成请求。

mounted () {
    axios
      .get('http://192.168.1.10:8080')
      .then(response => (this.info = response))
      .catch(function (error) { 
      });
  }

总结

最终大功告成，配置项可以根据自己的项目做合适的修改，vue也可以通过其他方式完成跨域问题的解决，这里是基于当时项目已有的技术栈做的配置，仅供参考。