Vue2.x版本 dev环境跨域代理和生产环境（nginx）跨域代理实现

最新推荐文章于 2025-06-23 14:23:09 发布

法儒至尊

最新推荐文章于 2025-06-23 14:23:09 发布

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 全家桶

本文链接：https://blog.youkuaiyun.com/zhangjj2418/article/details/87855771

Vue 全家桶专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在开发环境中通过配置代理解决跨域问题，并在生产环境中利用nginx进行跨域配置，实现前后端分离项目的正常运行。

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

dev环境

在config文件夹中的index.js文件中添加如下代码：

proxyTable: {
  '/api': {
    target: 'http://192.168.12.141:8040',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
    }
  }
},

添加在此处：
在这里插入图片描述

生产环境（nginx服务）

服务器安装好nginx服务后，修改nginx配置文件nginx.conf，该文件位置一般在/etc/nginx目录中，在

location / {
//......
}
//后面增加
location /api {
	rewrite  ^.+api/?(.*)$ /$1 break;
	include  uwsgi_params;
	proxy_pass   http://192.168.12.141:8040;#此处修改为自己的请求地址
}
//注意此处的配置对应dev环境的跨域代理配置（代理地址都是/api）