码迷,mamicode.com
首页 > 其他好文 > 详细

vue + vue-resource 跨域访问

时间:2016-12-08 18:42:03      阅读:761      评论:0      收藏:0      [点我收藏+]

标签:figure   pre   public   config   uil   map   tar   response   err   

使用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与CORSHTTP访问控制(CORS) ),上述java代码正是在返回的信息里设置其允许访问的意思。

vue + vue-resource 跨域访问

标签:figure   pre   public   config   uil   map   tar   response   err   

原文地址:http://www.cnblogs.com/zuxiyo/p/6145619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!