SpringBoot+Vue使用axios解决跨域问题

版权声明:本文为博主原创文章,本着开源的心态,大家可以转载,转载请标注出处。 https://blog.csdn.net/q297896911/article/details/86713834

最近在学习VUE,学到发送请求这个阶段了   推荐上B站  上面好多大神的教学视频

由于 vue更新到2.0之后vue-resource不再更新,强烈推荐使用axios发送请求,因此入手了axios

使用非常简单,直接查看官方文档就行:https://github.com/axios/axios

这个是中文文档:https://www.kancloud.cn/yunye/axios/234845

html页面设置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--1.导入Vue的包-->
    <script src="../lib/vue.js"></script>
    <!--  注意,vue-resource依赖于Vue,所以先后顺序要注意 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

    <div id="app">
        <input type="button" value="get请求" @click="getInfo">
        <input type="button" value="post请求" @click="postInfo">
    </div>

    <script>

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                // 官方:github地址:https://github.com/pagekit/vue-resource
                getInfo() {
                    console.log("发送get请求")
                    //当发起get请求之后,通过.then来设置回调成功的函数
                    axios.get('http://localhost:8080/Demo/index',changeOrigin=true).then((response) => {//这里使用箭头函数,那么下面的this指向就没有问题了
                        // 通过result.body 拿到服务器返回成功的数据
                        console.log(response.data)
                    })
                    // 两种写法
                    axios({
                        method:"get",
                        changeOrigin: true, // 这个参数代表发送跨域请求
                        url:"http://localhost:8080/Demo/index",
                        //注意:post方式提交 参数这里可以写data get方式提交用params
                        params:{
                            
                        }
                    }).then((response)=>{
                        console.log(response.data);
                    })
                },
                postInfo() {
                    console.log("发送post请求")
                    // 手动发起的Post 请求,默认没有表单格(application/x-www-form-urlencoded),所以,有的服务器处理不了
                    // 需要加上emulateJSON:true
                    axios.post("http://localhost:8080/Demo/index", changeOrigin=true,).then(function(response) {
                        console.log(response.data)
                    })
                }
            }
        })    
    </script>


</body>

</html>

使用中,进行到CORS(跨域资源共享),网上已有的接口人家都设置好了后端如何允许跨域访问,为了深刻理解一下,自己搭建一个java服务端,我用的是SpringBoot搭建的服务端,关键代码如下:

创建一个CorsConfig (跨域配置类)

package com.imjie.demo;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3允许任何方法(post、get等)
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

这个CorsConfig.java一定要放在根目录下,我的目录结构是这样的

跟demoApplication.java同级

数据库中放了两条数据进行测试:

 

完成!

 

 

展开阅读全文

没有更多推荐了,返回首页