springboot+vue前后端分離開發(fā)跨域問題

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

想要完成前臺(tái)傳數(shù)據(jù)給后臺(tái)，后臺(tái)將數(shù)據(jù)獲取并打印

實(shí)體類：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表示將前端傳來的數(shù)據(jù)轉(zhuǎn)成User對象@GetMapping("/add")public void add(@RequestBody User user){System.out.println(user);} }

前臺(tái)的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',//多添加一個(gè)/api 后面在配置中去除data: this.form})this.dialogVisible = false//關(guān)閉彈窗 } </script>

要實(shí)現(xiàn)跨域請求需要在package.json同級(jí)目錄下新建一個(gè)配置文件，文件名vue.config.js

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({devServer: {proxy: { //使用代理'/api': {target: 'http://localhost:8081', //代理地址secure: false, //這行一定加上，新版本這個(gè)不加還是會(huì)報(bào)錯(cuò)changeOrigin: true, //是否設(shè)置同源，輸入是的pathRewrite: { //路徑重寫'^/api': '' //將前面的字符替換成后面的字符}}}},transpileDependencies: true })

還不行就再在后端加上一個(gè)配置類，并且在接口上加上@CrossOrigin()注解

@Configuration public class Configurer implements WebMvcConfigurer {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true); //表示是否允許發(fā)送Cookie,true表示允許config.addAllowedOriginPattern("*"); // "*"表示接受任意域名的請求config.addAllowedHeader("*"); // 允許CORS請求額外發(fā)送的頭信息字段config.addAllowedMethod("*"); // 允許CORS請求使用的HTTP方法, "*"表示全部方法config.setMaxAge(3600L); // 用來指定預(yù)檢請求的有效期，單位為秒。在有效期間，不用發(fā)出另一條預(yù)檢請求source.registerCorsConfiguration("/**", config); // "/**"表示請求路徑是多級(jí)，"/*/*"表示請求路徑是兩級(jí)return new CorsFilter(source);} }

總結(jié)

以上是生活随笔為你收集整理的跨域问题的简单解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。