Vue项目中遇到No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. 跨域问题的解决方法

最新推荐文章于 2025-03-29 01:11:55 发布

不会有人真的学前端吧

最新推荐文章于 2025-03-29 01:11:55 发布

阅读量2.6k

点赞数 4

分类专栏： Vue学习文章标签： vue.js ajax跨域问题前端

本文链接：https://blog.youkuaiyun.com/fun_kunkun/article/details/119319214

版权

在Vue.js项目中遇到'Access-Control-Allow-Origin'错误时，可以通过配置反向代理和修改接口来解决跨域问题。具体方法是在vue.config.js文件中设置反向代理，并将生产环境URL替换为'/api'，利用反向代理的pathRewrite避免路径重复。

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

这是我在公司实习中遇到的问题,提供一下解决办法,可能解决的不是太好。公司有自己的框架..我还看不懂

解决办法:

1.配置反向代理 ----->反向代理传送门

在vue.config.js文件中添加反向代理

 devServer: {
    port: port,//自己的接口
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy:{
      "/api/*":{ 
          target:"http://douyindf.xingyebao.com",//对应后台接口
          changeOrigin:true,//是否跨域
          ws:true,
          pathRewrite:{//重定向
              '^/api':""
          }
      }
  }

2.改接口

将下方的生产环境的网址换成"/api",因为在反向代理中的重定向中的pathRewrite中的'^/api':"" ,所以跳转的时候加上/api 的话不会重复(?!我也不太懂,相对路径的问题吧?有大佬可以评论区说一下)

//1. 创建新的axios实例，
const service = axios.create({
  // 公共接口
  baseURL: "/api",                              //开发环境
  // baseURL: "http://douyindf.xingyebao.com",  //生产环境
});