Vue创建使用axios 跨域请求前端解决demo 及后端解决方式（uniapp同样适用）

虚构的乌托邦

已于 2022-05-04 21:54:50 修改

阅读量3.1k

点赞数

文章标签： vue.js

于 2022-03-31 10:31:11 首次发布

本文链接：https://blog.csdn.net/m0_50302965/article/details/123799106

版权

跨域GET 请求

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			#title {
				display: none;
			}
		</style>
	</head>
	<div id="app">
		<!-- v-show绑定了data里的flag,为真时显示标签，false时隐藏标签 -->
		<!-- v-bind是属性绑定，这里绑定了style样式，v-bind标签可以省略，这里可以直接写成:style -->
		<span v-show="flag" v-bind:style="color">发送成功</span>
		<!-- 这里用插值表达式渲染文本 -->
		<span v-show="flag">{{ss}}</span>
		<form>
			<!-- v-model是数据的双向绑定，用于将data中的元素值绑定到标签上 -->
			用户名：<input type="text" v-model="formData.username" />
			<br />
			密码： <input type="password" v-model="formData.password" />
			<br />
			<!-- v-on是事件绑定，冒号后面的click表示绑定的点击事件，v-on可以省略，直接写成:click -->
			<input type="button" value="提交" v-on:click="send()" />
		</form>
	</div>

	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<script>
			new Vue({
				el: '#app',
				// data中存放数据，都是以对象的形式存储
				data: {
					ss: '',
					formData: {
						username: '',
						password: '',
					},
					flag: false,
					color: '',
				},
				// 所有的方法都放在methods（注意：复数）里面
				methods: {
					// 定义方法
					send() {
						var dd=this;


						axios({
							url: 'http://localhost:8080/index', //在线跨域请求
							method: "GET", //默认是get请求
							headers: { //设置请求头
								'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.0.4","e":"15611234619393093477584"}',
								'X-Host': 'mall.film-ticket.film.list',
							}
						}).then(function(val) {
							dd.flag=true;
							 dd.ss=val.data
							console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
						}).catch(function(err) {
							
							console.log(err)
						})

					},
				},
			});
		</script>
	</body>
</html>

跨域POST 请求

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			#title {
				display: none;
			}
		</style>
	</head>
	<div id="app">
		<!-- v-show绑定了data里的flag,为真时显示标签，false时隐藏标签 -->
		<!-- v-bind是属性绑定，这里绑定了style样式，v-bind标签可以省略，这里可以直接写成:style -->
		<span v-show="flag" v-bind:style="color">发送成功</span>
		<!-- 这里用插值表达式渲染文本 -->
		<span v-show="flag">{{ss}}</span>
		<form>
			<!-- v-model是数据的双向绑定，用于将data中的元素值绑定到标签上 -->
			用户名：<input type="text" v-model="formData.username" />
			<br />
			密码： <input type="password" v-model="formData.password" />
			<br />
			<!-- v-on是事件绑定，冒号后面的click表示绑定的点击事件，v-on可以省略，直接写成:click -->
			<input type="button" value="提交" v-on:click="send()" />
		</form>
	</div>

	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<script>
			new Vue({
				el: '#app',
				// data中存放数据，都是以对象的形式存储
				data: {
					ss: '',
					formData: {
						username: '',
						password: '',
					},
					flag: false,
					color: '',
				},
				// 所有的方法都放在methods（注意：复数）里面
				methods: {
					// 定义方法
					send() {
						var dd=this;
						


						axios({
							url: 'http://localhost:8080/index', //在线跨域请求
							method: "POST", //默认是get请求
							headers: { //设置请求头
								'X-Client-Info': ' {"a":"3000","ch":"1002","v":"5.0.4","e":"15611234619393093477584"}',
								'X-Host': 'mall.film-ticket.film.list',
							},
							params:{
								username: dd.formData.username,
								 password: dd.formData.password}
						}).then(function(val) {
							dd.flag=true;
							 dd.ss=val.data
							console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
						}).catch(function(err) {
							
							console.log(err)
						})

					},
				},
			});
		</script>
	</body>
</html>

没有跨域

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<script>

new Vue({
				el: '#app',
				// data中存放数据，都是以对象的形式存储
				data: {
					ss: '',
					formData: {
						username: '',
						password: '',
					},
					flag: false,
					color: '',
				},
				// 所有的方法都放在methods（注意：复数）里面
		methods: {
  				getData(){
                   

                  var p =  axios({
                        url:"./data/name.json",
                        method:'get',//method默认是get请求
                    }).then(function(res){
                        console.log(res)
                        //res.data是返回值
                        // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
                    }).catch(err=>{
                        console.log(err)
                    })
             },
         },
	});
</script>

post 请求端springboot 控制层对接demo

@Controller
public class controller {
    @ResponseBody
    @PostMapping ("/index")
    public String index(String username,String password ) {//可以封装成vo层对象接收

        System.out.println(username+"******客户连接数****"+password);

        return "index";


    }

    }
}

跨域请求后端解决方式一

接口加个@CrossOrigin注解

@CrossOrigin

@Controller
public class controller {
    @ResponseBody
    @CrossOrigin
    @PostMapping ("/index")
    public String index(String username,String password ) {//可以封装成vo层对象接收

        System.out.println(username+"******客户连接数****"+password);

        return "index";


    }

    }
}

方式二

package com.sec.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 解决跨域问题 配置类
 */
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE","OPTIONS")
                .maxAge(3600)
                .addAllowedHeader("*");
    }
}

虚构的乌托邦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue创建使用axios 跨域请求前端解决demo 及后端解决方式（uniapp同样适用）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
复制链接

扫一扫