vue-element-template跨域

在Vue项目中遇到访问后端API的跨域错误?本文介绍了一种解决方案。首先,在vue.config.js中配置代理,将目标设置为https://localhost:5001/api,并启用changeOrigin。然后,修改.env.development文件,将VUE_APP_BASE_API设为'//api///'。最后,更新user.js中的请求URL。实验表明,配置中的斜杠数量可灵活调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

访问后端https://localhost:5001/api/todoitems时报跨域的错误,通过下面步骤可解决。 

第一步:在vue.config.js中添加如下代码。

proxy: {
      'api': {
          target: 'https://localhost:5001/api//',
          changeOrigin: true,
          // ws:false,
          pathRewrite: {
            '/api/': ''
          }
      }
    },

添加后如下图。

 第二步:修改.env.development中的VUE_APP_BASE_API的值为'//api///',如下代码。

VUE_APP_BASE_API = '//api///'

第三步:根据前两步修改user.js中的api,如下。

return request({
    url: '/todoitems',
    method: 'get',
    data
  })

经过试验发现第一步的target最后的斜杆和第二步中的斜杆的数目可随意设置,第三步中的url前面的斜杆数目为0或1个。

首先需要安装好SpringBoot和Vue,然后按照以下步骤整合vue-element-template实现登录功能: 1.vue-element-template中的src/api目录下新建一个user.js文件,用于定义登录接口: ``` import request from '@/utils/request' export function login(username, password) { return request({ url: '/login', method: 'post', data: { username, password } }) } ``` 2.vue-element-template中的src/views/login目录下新建一个index.vue文件,用于实现登录页面: ``` <template> <div class="login-container"> <div class="login-box"> <h2>登录</h2> <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px" class="login-form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">登录</el-button> </el-form-item> </el-form> </div> </div> </template> <script> import { login } from '@/api/user' export default { name: 'Login', data() { return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { login(this.form.username, this.form.password).then(response => { if (response.data.code === 0) { this.$message.success('登录成功') this.$router.push('/') } else { this.$message.error(response.data.msg) } }).catch(error => { console.log(error) }) } else { return false } }) } } } </script> <style scoped> .login-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-box { width: 400px; height: 400px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 20px; } .login-form { margin-top: 20px; } </style> ``` 3. 在SpringBoot中的controller中定义/login接口,用于处理登录请求: ``` @RestController public class UserController { @PostMapping("/login") public Result login(@RequestBody User user) { // 验证用户名和密码 if ("admin".equals(user.getUsername()) && "123456".equals(user.getPassword())) { return Result.ok(); } else { return Result.error("用户名或密码错误"); } } } ``` 4. 在SpringBoot中的application.properties中配置访问: ``` # 允许访问 spring.mvc.cors.allow-credentials=true spring.mvc.cors.allowed-origins=* spring.mvc.cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS spring.mvc.cors.allowed-headers=* ``` 这样就实现了SpringBoot和vue-element-template的整合,实现了登录功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值