使用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 跨域访问的更多相关文章

  1. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  2. Vue开发环境跨域访问

    Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下 module.exports = { dev: { // Paths assetsSubD ...

  3. vue.js+DRF跨域访问图片

    一.背景 在前后端分离过程时,后端服务器只开放本地接口,而前端则开放IP接口,在DRF响应请求时,会把域名(locahost+port)响应给前端服务器,前端服务器把再把数据响应给浏览器,浏览器在解析 ...

  4. vue跨域访问

    第一次创建vue项目,画完静态页面一切顺利,准备和后台进行联调,问题来了,无论怎么调试使用Axios,jQuary还是使用原生的Ajax请求都访问不通(前提条件,另外一个人的电脑当成服务器,进行访问) ...

  5. Vue跨域访问,axios&cors

    先安装node.js和npm,这个不用说了,直接在创建vue项目,然后实践一下跨域访问. 如果npm安装较慢,可安装淘宝镜像,执行下面命令: npm install -g cnpm --registr ...

  6. vue ui九宫格、底部导航、新闻列表、跨域访问

    一.  九宫格 九宫格:在mint-ui组件库基于vue框架 mui不是基于vue框架 只是css/js文件 (1)官方网站下载安装包 (2)copy css js fonts[字体图标] src/l ...

  7. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  8. Vue之通过代理设置跨域访问

    我们使用脚手架创建的项目,可以在config项目中看到

  9. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

随机推荐

  1. Android学习路线(二十七)键值对(SharedPreferences)存储

    假设你又一个相对较小的键值对数据想要保存,你应该使用SharedPreferences APIs.一个SharedPreferences 对象指向一个包括键值对的文件,它提供简单的方法来读写他们.每一 ...

  2. JavaScript经典魔力代码

    是什么使得JavaScript不同于其他程序设计语言,在浏览器修饰方面表现出其优异的特性?毫无疑问,JavaScript在Web应用领域受到的好评,既源于它自身灵活的动态特性,也源于浏览器对它充分的支 ...

  3. How To Make a Music Visualizer in iOS

     Xinrong Guo on June 4, 2013 Tweet Learn how to create your own music visualizer! In the mid-seventi ...

  4. DOM模型结构——节点类型

  5. 常用分组函数count-avg-sum-max-min

    分组函数也称多行函数,用于对一组数据进行运算,针对一组数据(取自于多行记录的相同字段)只返回一个结果,例如计算公司全体员工的工资总和.最高工资.最低工资.各部门的员工平均工资(按部门分组)等.由于分组 ...

  6. C#。5 函数 类

    函数:能够独立完成某个功能的模块.          好处:1.结构更清析(编写.维护方便 ).2.代码重用.3.分工开发.          四要素:名称,输入(参数),输出(返回的类型),加工(函 ...

  7. spring项目中监听器作用-ContextLoaderListener(项目启动时,加载一些东西到缓存中)

    作用:在启动Web容器时,自动装配Spring applicationContext.xml的配置信息. 因为它实现了ServletContextListener这个接口,在web.xml配置这个监听 ...

  8. java泛型中? super T和? extends T的区别

    <? super T>表示包括T在内的任何T的父类,<? extends T>表示包括T在内的任何T的子类;请记住PECS原则:生产者(Producer)使用extends,消 ...

  9. Objective-C 异常处理

    #import <UIKit/UIKit.h> #import "AppDelegate.h" int main(int argc, char * argv[]) { ...

  10. C#string与char互转

    string s = "asdf"; //字符转char char[] c = s.ToCharArray(); Console.WriteLine(s[]); //char转st ...