springboot+VUE+部署（11。前端后端对接以及跨域问题）

rfidunion2026-02-11 9:16

在前端代码中找到 src->api->user.js代码

复制代码

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}

把URL 改成下面的代码：

复制代码

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

因为我们后端的接口是"/user/*"

后端处理跨域问题：

方法1：在每个控制器下面加入 @CrossOrigin

方法2：

在common文件夹中加入MyCrossConfig类:

//要注意导入类有选择时，不能选错

复制代码

package com.example.demo.common;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


@Configuration
public class MyCrossConfig {
    @Bean
    public CorsFilter corsFilter()
    {
//        1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
//        1）允许的域，不要写*，否则COOKIE就无法使用了
        config.addAllowedOrigin("http://localhost:8888");//这里要写请求的前端服务器
//        2）是否发送Cookie信息
        config.setAllowCredentials(true);
//        3）允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
//        4）允许的头信息
        config.addAllowedHeader("*");
//        2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**",config);
//        3.返回新的CorsFilter
        return new CorsFilter(configSource);
    }
}