【已解决】vue 跨域问题

最新推荐文章于 2025-03-25 09:13:52 发布

山有木兮-

最新推荐文章于 2025-03-25 09:13:52 发布

阅读量437

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_46334815/article/details/130135039

版权

文章讲述了在开发过程中遇到的CORS跨域问题，以及如何通过设置axios的baseURL和在vue.config.js中配置proxy进行解决。添加代理配置，将/api指向http://localhost:8080，并启用changeOrigin和pathRewrite，可以成功解决跨域访问http://localhost:8080/user/getInfo的问题。

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

问题重述

报错如下：

p://localhost:8080/user/getInfo' from origin 'http://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS跨域问题

这个CORS，是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）需要浏览器和服务器同时支持。
所有浏览器都支持该功能。

在封装的ajax中添加baseURL，如果没有封装，则在main.js中添加

axios.defaults.baseURL = '/api'

在这里插入图片描述在vue.config中添加下面的代码

proxy: {
    //代理的根路径
     '/api': {
        //代理的后端路径
        target: 'http://localhost:8080',
        //是否开启根路径转换  123
        changeOrigin: true,
        //代理路径更改
        pathRewrite: {
            '/api':''
        }
    }
}