使用Vue怎么解决跨域请求问题?

在使用vue前先看原生js解决跨域

使用的接口:http://suggestion.baidu.com/su?cb=qq&wd=哈哈
body内容:

 <input type="text">
    <button>提交</button>
    <ul></ul>
    <script>
    //查找对应的表单元素
        var ipt = document.getElementsByTagName("input")[0];
        var btn = document.getElementsByTagName("button")[0];
        var oul = document.getElementsByTagName("ul")[0];
	//给btn添加点击事件
        btn.onclick = function () {
       		//当点击按钮的时候利用script的src属性提交请求→新建一个script标签
            var s = document.createElement("script");
            //给这个标签的src属性赋值 赋值时在wd后面的参数是需要查找的关键字,这个值是用户在input中输入的值
            s.src = `http://suggestion.baidu.com/su?cb=callback&wd=${ipt.value}`
            //最后将这个script标签添加到body中
            document.body.append(s)
        }
	//在src中提交的接口连接中有一个回调函数,需要自己来设置
        function callback(res) {
        	//在这个回到函数中的res参数是传递过来搜索到的结果
            for (let i = 0; i < res.s.length; i++) {
            	//循环遍历并创建li标签
                var li = document.createElement("li");
                //给li中添加查找到的内容
                li.innerHTML = res.s[i];
                //将li添加到ul中
                oul.append(li)
            }
        }
    </script>

上述代码就可以实现一个简单的跨域请求,这是以原生js的方法实现的

使用vue来模拟一个跨域请求

解决跨域请求的核心是用script标签的src,script的请求时不受限制的
使用的接口:http://suggestion.baidu.com/su?cb=qq&wd=哈哈

<body>
    <div id="app">
        <input type="text" v-model="ipt">
        <button @click="submit()">提交</button>
        <ul>
        	//for循环遍历result中的数据 {{val}}显示遍历的数据
            <li v-for="(val, index) in result" :key="index">{{val}}</li>
        </ul>
    </div>

    <script>
    	//将实例化的vue存储
        var vue = new Vue({
            el: "#app",
            data: {
                ipt: "",
                result: []
            },
            methods: {
                submit() {
                	//这里步骤与原生js一样操作
                    var s = document.createElement("script");
                    s.src = `http://suggestion.baidu.com/su?cb=callback&wd=${this.ipt}`
                    document.body.append(s)
                }
            },
        })

        function callback(res) {
        //vue中的result属性是查找到数据的长度,将res.s返回的数据存入
            vue.result = res.s
        }
    </script>
</body>

总结步骤:

  • 创建一个script标签
  • 设置script标签的src属性
  • 把script标签追加到body内
  • 设置回调函数
Spring Security 和 Vue.js 在处理跨域问题时通常会遇到一些挑战,因为它们分别负责后台服务器的安全控制和前端应用的数据请求。Vue.js默认不支持跨域请求,而Spring Security在默认情况下可能会限制来自不同源的HTTP访问。以下是解决这个问题的一些步骤: 1. **配置Spring Security**: - 如果Spring Security设置了CORS(跨源资源共享)策略,你需要确保允许特定的Origin。在WebSecurityConfigurerAdapter中添加如下的代码片段: ```java @Override public void configure(HttpSecurity http) throws Exception { http.cors().and() .authorizeRequests() // 允许特定的域名 .antMatchers("/**").allowedOrigins("*") .anyRequest().authenticated(); // 更详细的设置可以在configureCors方法中完成 } ``` 2. **启用CORS预检请求**: - 当浏览器发起跨域请求时,它首先发送一个OPTIONS请求(也称为"预检请求")。如果你的服务器没有响应这些请求,可能需要在Spring MVC或Filter层上处理这些预检请求。 3. **后端允许简单请求头**: - 在Spring Security中,你可以设置`corsConfiguration.addAllowedHeader("*")`来允许所有请求头,并`corsConfiguration.addAllowedMethod("*")`允许所有HTTP方法。 4. **Vue.js 中的处理**: - 在Vue项目中,当向非同源API发起AJAX请求时,你需要设置`withCredentials: true`,同时在axios的配置里处理跨域: ```javascript axios.defaults.withCredentials = true; axios.interceptors.request.use(config => { if (window.isLocalhost) { config.headers.common['X-Custom-Header'] = 'your-value'; // 假设这里有个自定义header } return config; }, error => Promise.reject(error)); ``` 5. **Nginx、Apache等反向代理**: - 如果你是在生产环境中,可以考虑使用Nginx或Apache作为代理服务器,将跨域请求转发到Spring Boot服务器,并在那里处理CORS设置。 记得测试每个解决方案是否有效,因为跨域问题可能受多个因素影响。如果你的Spring Security配置了更复杂的策略,可能还需要根据具体情况进行调整。相关的相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值