使用vue + vue-resource进行数据提交，后台使用RESTful API的方式存取数据，搞了一天，终于把后台搞好了。进行联合调试时，数据不能提交，报403错误：
XMLHttpRequest cannot load http://localhost:8090/xxx/xxx. Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://localhost:8080‘ is therefore not allowed access. The response had HTTP status code 403.
当时就懵逼了，愣了半天，突然脑子里灵光一闪，这**的不会是没有权限进行跨域访问的错误吧？然后就赶紧上网查找解决方案，有前端解决方案 和 后端解决放案两种：
前端解决方案是在 build/webpack.dev.conf.js 文件中加个代理，但好像要把访问的API一一映射，工作量有点大，遂没有使用这种方式。这种方式没试过，不知可不可行。
后端方案为在后台站点中加入允许指定的站点访问的信息：
/** * 解决前端站点(主要为JavaScript发起的Ajax请求)访问的跨域问题 */ @Configuration public class CorsConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") //允许所有前端站点调用 .allowCredentials(true) .allowedMethods("GET", "POST", "DELETE", "PUT") .maxAge(1728000); } }
原来发起Ajax跨域请求后，事先会对目标站点进行一次询问，是否允许访问，允许后，才会发起真实的请求（参考：构建public APIs与CORS，HTTP访问控制(CORS) ），上述java代码正是在返回的信息里设置其允许访问的意思。
原文：http://www.cnblogs.com/zuxiyo/p/6145619.html