前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-

最新推荐文章于 2025-06-09 22:35:10 发布

一个与程序bug抗争的程序员

最新推荐文章于 2025-06-09 22:35:10 发布

阅读量8.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript spring boot

本文链接：https://blog.youkuaiyun.com/qq_42416602/article/details/121731774

在Vue+SpringBoot项目中遇到跨域问题，由于前后端不同域名导致请求被浏览器的CORS政策阻止。解决方法包括在SpringBoot后端接口使用@CrossOrigin注解或者在Vue的vue.config.js中设置代理。本文作者选择了在前端设置代理的方式，通过修改vue.config.js配置，成功解决了跨域问题。

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

完整报错如下：

Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://localhost:8081/login net::ERR_FAILED 500

createError.js?e648:16 Uncaught (in promise) Error: Network Error
at createError (createError.js?e648:16)
at XMLHttpRequest.handleError (xhr.js?b9e2:117)

错误原因：

本人的项目是Vue+SpringBoot前后端分离的，前后端项目启动的端口号不一样，因此域名不一样，产生跨域问题导致。

解决办法：

方法一：

在后端接口上加注解：

@CrossOrigin(origins = "*",maxAge = 3600)

不过这样需要在每一个访问接口上都要加这条注解，比较麻烦，推荐采用方法二。

方二一：

在前端项目的src目录下新建代理配置文件vue.config.js

let proxyObj = {};

proxyObj['/'] = {
  //websocket
  ws: false,
  //目标地址
  target: 'http://localhost:8081',
  //发送请求头中host会设置成target
  changeOrigin: true,
  //不重写请求地址
  pathRewrite: {
    '^/': '/'
  }
};

// websocket的代理

proxyObj['/ws'] = {
  ws: true,
  target: 'ws://localhost:8081'
};

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  },
  configureWebpack: {
    devtool: 'source-map'
  }
};

本人采用第二种方法，完美解决问题！