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

最新推荐文章于 2025-10-20 16:02:04 发布

原创

最新推荐文章于 2025-10-20 16:02:04 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ajax跨域问题 #前端

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

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

解决办法:

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",  //生产环境
});