记录:使用springboot的cors和vue的axios进行跨域

一、编写一个配置类,并且注册CorsFilter:

注意允许跨域的域名不要写错

@Configuration
public class ZysuyuanCorsConfiguration {

    @Bean
    public CorsFilter corsFilter() {
        // 初始化cors配置对象
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 允许跨域的域名,如果要携带cookie,不能写*,*代表所有域名都可以跨域访问
//        corsConfiguration.addAllowedOrigin("http://localhost:10008");
        // 本机使用nginx测试
        corsConfiguration.addAllowedOrigin("http://localhost:8778");
//        corsConfiguration.addAllowedOrigin("http://localhost:8778");
        corsConfiguration.setAllowCredentials(true);    // 允许携带cookies
        corsConfiguration.addAllowedMethod("*");    // 代表所有的请求方法:get、post、put、delete
        corsConfiguration.addAllowedHeader("*");    // 允许携带任何头信息

        // 初始化cors配置源对象
        UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
        configurationSource.registerCorsConfiguration("/**",corsConfiguration);

        // 返回corsFilter实例,参数:cors配置源对象
        return new CorsFilter(configurationSource);
    }
}

二、编写vue的axios请求

注意:如果使用vue2.0中使用axios进行(put,post请求时),遇到415错误(参考:https://www.cnblogs.com/shuaifing/p/7921102.html

解决办法:在axios的第三个参数config中,设置请求头信息‘Content-Type‘: ‘application/json;charset=UTF-8‘

    insertDevice(query) {
        return request({
            url: ‘/item/device/save‘,
            method: ‘post‘,
            data: JSON.stringify(query),
            headers : {
                ‘Content-Type‘ : ‘application/json;charset=UTF-8‘  // 注意此处的头信息要写为application/json;charset=UTF-8
            }
        })
    }

补充:

vue中子组件调用父组件的方法(参考:https://juejin.im/post/5c1370365188250f73759a79

1、$emit方法

父:

@fselect绑定父组件中的searchBydeviceName方法

 <add-new
        ref="feditForm"
        @fselect="searchBydeviceName"
        @close="closeEditor"
        :isEdit="isEdit"
        :addnewData.sync="fpojo"
      ></add-new>

子组件调用:

this.$emit("fselect");

 

....以后用到再更新

原文地址:https://www.cnblogs.com/flypig666/p/11877049.html

时间: 2024-10-30 11:54:24

记录:使用springboot的cors和vue的axios进行跨域的相关文章

.net core3.1 webapi + vue.js + axios实现跨域

我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目 既然谈到axios,这里贴出axios的官方文档地址: http://www.axios-js.com/zh-cn/docs/ 首先是前端部分进行设置 第一步,在vue项目中安装axios 在vs code的终端中输入命令 npm install axios 稍等片刻,即可完成安装 第二步,构建axios的测试api 首先需要在main.js中,引入前面安装的axios 然后在某个组件

再遇CORS -- 自定义HTTP header的导致跨域

指路牌 后端配置好了跨域,但是前端在HTTP header添加token后,又产生跨域的问题 Flask.Vue(Axios).跨域 适用场景 前后端分离,想要使用token来管理登录状态,或调用后台接口 环境 平台无关 参考博客 axios 在header中配置token信息后,向后端请求会报跨域的问题.但是用postman测试的时候没有什么问题. 这个问题的回答其实没有给出直接性的帮助,甚至回答的有点奇怪,但是帮我打开了思路. 背景 出于多种考虑,放弃了使用类似WordPress这种现成博客

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

vue webpack配置解决跨域问题

现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 http.js post (url, data) { return axios({ method: 'post', baseURL: '/api', url, data: data, timeout: 10000, headers: { 'X-Requested-With': 'XMLHttpRe

【vue】--代理方式跨域

正向代理与反向代理 前端使用代理主要用于跨域请求, 关于跨域:常用的方式 JSONP:利用script标签可跨域的特点,在跨域脚本中可以直接回调当前脚本的函数. CORS:服务器设置HTTP响应头中Access-Control-Allow-Origin值,解除跨域限制 但是这两个跨域方案都存在一个致命的缺陷,严重依赖后端的协助, 代理 就可以作为 前端独立解决跨域的方案 正向代理 是指一个位于客户端和目标服务器(target server)之间的服务器,为了从目标服务器取得内容,客户端向代理发送

跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

(转)跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR