vue跨域问题解决

最新推荐文章于 2025-06-26 04:59:00 发布

求索nnnn

最新推荐文章于 2025-06-26 04:59:00 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_66721210/article/details/129115601

跨域是由于浏览器的同源策略限制，解决方案包括JSONP、后端添加响应头和代理转发。文章重点讲述Vue项目中使用代理转发的方式，通过在vue.config.js的devServer配置项下设置代理，将/api开头的请求转发到指定服务器，从而规避同源策略限制。

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

跨域原因

因为浏览器的同源策略：

比如A地址像B地址发送请求的时候，如果A和B地址的协议、域名、端口不全相同，则说明请求是跨域的

如何解决跨域

一般有三种方式： 1.JSONP（已淘汰）； 2.让后端同学添加相应的响应头； 3.vue代理转发

我们这里重点讲代理转发的实现

实现原理：我们可以选择一个代理服务器，把协议、域名、端口设置成符合同源策略的，再由代理服务器进行中转的发、收数据。而服务器之间交互是不受同源策略的

vue解决跨域配置说明

在vue.config.js文件中，有个配置项为devServer

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        // 如果请求基地址以/api打头,就出触发代理机制
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}