跨域问题的简单解决办法

springboot+vue前后端分离开发跨域问题

前端使用8080端口，后端改用8081端口

想要完成前台传数据给后台，后台将数据获取并打印

实体类：user

@TableName("user")
@Data
public class User {private Integer id;private String username;private String password;private String nickName;private Integer age;private String sex;private String address;
}

控制类：UserController

@RestController
@RequestMapping("/user")
public class UserController {@ResourceUserMapper userMapper;//@RequestBody表示将前端传来的数据转成User对象@GetMapping("/add")public void add(@RequestBody User user){System.out.println(user);}
}

前台的vue页面：

<template><el-button type="primary" @click="add">新增</el-button><el-dialog v-model="dialogVisible" title="添加用户" width="30%"><el-form :model="form" label-width="120px"><el-form-item label="用户名"><el-input v-model="form.username" style="width: 80%" /></el-form-item><el-form-item label="昵称"><el-input v-model="form.nickName" style="width: 80%" /></el-form-item><el-form-item label="年龄"><el-input v-model="form.age" style="width: 80%" /></el-form-item><el-form-item label="性别"><el-radio v-model="form.sex" label="男">男</el-radio><el-radio v-model="form.sex" label="女">女</el-radio><el-radio v-model="form.sex" label="未知">未知</el-radio></el-form-item><el-form-item type="textarea" label="地址"><el-input v-model="form.address" style="width: 80%" /></el-form-item></el-form><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="save">确定</el-button></span></el-dialog>
</template><script>
import request from "@/utils/request";
export default {name: 'Home',components: {},add() {this.dialogVisible = truethis.form = {}//每次取消可以清空输入框的信息},save() {axios({method: 'GET',url: '/pai/user/add',//多添加一个/api 后面在配置中去除data: this.form})this.dialogVisible = false//关闭弹窗  }
</script>

要实现跨域请求需要在package.json同级目录下新建一个配置文件，文件名vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({devServer: {proxy: {    //使用代理'/api': {target: 'http://localhost:8081', //代理地址secure: false,    //这行一定加上，新版本这个不加还是会报错changeOrigin: true, //是否设置同源，输入是的pathRewrite: {  //路径重写'^/api': ''   //将前面的字符替换成后面的字符}}}},transpileDependencies: true
})

还不行就再在后端加上一个配置类，并且在接口上加上@CrossOrigin()注解

@Configuration
public class Configurer implements WebMvcConfigurer {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);  //表示是否允许发送Cookie,true表示允许config.addAllowedOriginPattern("*");  // "*"表示接受任意域名的请求config.addAllowedHeader("*");   // 允许CORS请求额外发送的头信息字段config.addAllowedMethod("*");   // 允许CORS请求使用的HTTP方法, "*"表示全部方法config.setMaxAge(3600L);    // 用来指定预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求source.registerCorsConfiguration("/**", config);  // "/**"表示请求路径是多级，"/*/*"表示请求路径是两级return new CorsFilter(source);}
}

跨域问题的简单解决办法相关推荐

java cookie p3p_P3P script src 解决cookie存取的跨域问题 java 终极解决办法
最近在做一个项目,我的网站是www.a.com,但是需要取到www.b.com网站的cookie,折腾了很久,在同事的合作下.总算搞定了. 我是用java做的, 首先在www.a.com/a.vm文件 ...
关于CSRF跨域请求伪造的解决办法
中秋节时候我们的应用在短信验证码这块被恶意刷单,比如被用来做垃圾短信之类的,如果大规模被刷也能造成不小的损失.这还只是短信验证码,如果重要的API遭到CSRF的攻击,损失不可估量.所以紧急加班解决了C ...
jsonp解决跨域问题（简单易懂）
在日常的项目开发中,前端和后台是要经常交互的,有时候前端去请求后端的接口时,会出现跨域这个问题,解决跨域的方法有很多,本文主要讲解下如何使用jsonp来解决跨域问题. 解决问题之前,我们首先要明白一个 ...
[DiscuzNt]整合DiscuzNt论坛目前所发现的小BUG及个人简单解决办法
前段时间因为公司项目需要,需要在网站中整合BBS论坛,主要实现会员信息同步,经过目前市面上开源的BBS项目,最终认为还是DiscuzNt比较好,原因有以下几点: 1.符合国人习惯,DiscuzNt是由 ...
PHP解决http和https跨域,php中http与https跨域共享session的解决方法
这篇文章主要介绍了http与https跨域共享session的解决方法,需要的朋友可以参考下遇到了HTTP.HTTPS协议下session共享解决cookie失效的问题,这里提供一个临时解决办法. ...
用组策略发布软件的简单解决办法
利用组策略发布软件的简单解决办法今天和大家共同学习一下利用组策略来发布软件,据说是很方便的,今天就来试一下先说点小知识点:可能大家早就已经知道.见笑见笑软件的部署分为指派和发布两种.发布呢不具有 ...
跨域问题及常见解决方法---以 Geoserver 为例
跨域问题及常见解决方法---以 Geoserver 为例跨域问题跨域简介解决跨域常用方法前端代理后端处理其他代理(nginx) Geoserver 解决跨域免费解决跨域工具:[geose ...
什么是跨域问题？如何解决？
跨域问题指的是不同站点之间,使用 ajax 无法相互调用的问题.跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据. 但这个保护机制也带来了新的问题,它的问题是给不 ...
浏览器禁止跨域请求json数据解决方法--jsonp
浏览器禁止跨域请求json数据解决方法--jsonp 参考文章: (1)浏览器禁止跨域请求json数据解决方法--jsonp (2)https://www.cnblogs.com/uyisi/p/56 ...

跨域问题的简单解决办法

springboot+vue前后端分离开发跨域问题

跨域问题的简单解决办法相关推荐

最新文章

热门文章