vue解决跨域

前后端分离跨域403问题解决

最新推荐文章于 2024-03-08 16:38:32 发布

原创最新推荐文章于 2024-03-08 16:38:32 发布 · 481 阅读

1 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

26 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

博客围绕前后端分离时出现的问题展开，前端采用Vue，后端接口用Spring Boot，请求出现403跨域问题。并给出了解决办法，包括在npm中安装相关内容、页面导入以及后台代码操作。

描述：前后端分离，前端vue，后端接口用springBoot，请求出现403跨域问题

1.首先在npm中安装

npm install qs

2.页面导入

<script>
import qs from 'qs';
export default {
	data(){
		return {
			name:'',
			phone:'',
			address_region:'',
			address_info:'',
			checked:true,
		}
	},
	created(){
        // this.$store.commit('headerShow',false)
        // this.$store.commit('headerShow',{header:true,slot:'新增收货地址'})
    },
	methods:{
		add:function () {
            this.$http.post('http://localhost:8080/address/add',
            qs.stringify({name:this.name,phone:this.phone,address_region:this.address_region,address_info:this.address_info,checked:this.checked}),{emulateJSON:true}).then(function(res){
                console.log(res.data);
            },function(res){
                console.log(res.status);
            });
        }
	},
	computed:{},
	components:{

	}
}
</script>

3.后台代码

    @ResponseBody
    @PostMapping("/add")
    public int addAddress(Address address){
        //response.setHeader("Access-Control-Allow-Origin", "*");
        return addressService.addAddress(address);
    }