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);} }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。