Vue与springboot间跨域问题

最新推荐文章于 2025-03-08 14:13:37 发布

2301_76356084

最新推荐文章于 2025-03-08 14:13:37 发布

阅读量205

点赞数

文章标签： vue.js spring boot javascript 前端 java

本文链接：https://blog.youkuaiyun.com/2301_76356084/article/details/129205043

版权

本文探讨了Vue.js与Spring Boot应用在跨域过程中遇到的问题，包括4xx和5xx错误，指出错误可能源于前端、后端配置甚至是URL路径细节。同时，提到了Spring Boot入参注解的正确使用，以及在部署到服务器后，使用nohup后台运行jar包的注意事项。此外，还讨论了nginx配置跨域时关于前缀/api/的细节，并提供了vue.config.js和请求拦截器的配置示例。

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

跨域有问题有时候报的是4xx,有时候是5xx，但是不一定是后端代码有问题，也不一定是前端代码有问题；有时候往往就是一个/都会导致报错。通了的话，浏览器看请求的时候，它显示的地址依旧是前端的ip和端口。

还有一种情况，跨域其实是配好了的，但是由于springboot入参注解弄错了，也会通不了。比如，方法上是PostMapping,但是入参却用@RequestParam之类的。

部署到服务器后，用nohup运行jar包也需要注意末尾加&。保证后台运行，不然ctrl C就没了。可以用telnet试试后端服务通不通。

nginx配置跨域的时候，前缀/api/，可能需要后面这个/。

nginx的配置文件这样写。

server{
        listen 9876;
        server_name localhost;
        charset utf-8;
        location / {
                root /home/xxx; // vue通过build出来的文件位置
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }
        location /api/{
                proxy_pass http://yourIp:9090/;
        }
        }

vue项目中的vue.config.js这样配置


module.exports = {
  // 跨域配置
  devServer: {      //记住，别写错了devServer/         
    port:9876, //设置本地默认端口  选填
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://yourIp:9090',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}

request这样写。拦截器配置了/api，写请求时，就可以不用加/api了。

import axios from 'axios'

const request = axios.create({
    baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 30000
})

// request 拦截器
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request