Nginx前端代理发布

最新推荐文章于 2025-05-23 17:37:31 发布

qq_39704803

最新推荐文章于 2025-05-23 17:37:31 发布

阅读量608

点赞数

CC 4.0 BY-SA版权

分类专栏：服务配置文章标签： javascript 小程序 nginx

本文链接：https://blog.csdn.net/qq_39704803/article/details/121475609

服务配置专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue.js项目中，如何通过`config/index.js`配置devServer的proxy来实现API请求的代理，以解决跨域问题。同时，展示了Nginx服务器的配置，通过`location`指令将`/api`路径的请求转发到指定的后端服务，确保前端和后端的通信顺畅。

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

1.vue中的config配置

const baseUrl="http://192.168.10.206:8092"
const VUE_APP_BASE_API = '/api'
 devServer: {
      disableHostCheck: true,
      port:8082,
      proxy: {
        [process.env.VUE_APP_BASE_API]: {
          target: baseUrl,
          changeOrigin: true,
          pathRewrite: {
            ['^' + process.env.VUE_APP_BASE_API]: ''
          }
        },
      },
  },

2.nginx的nginx.conf配置

     location / {
            root   html;
            index  index.html index.htm  index.php;
        }
     location /api/ {
       rewrite ^/api/(.*)$ /$1 break;
       proxy_pass http://127.0.0.1:8092;  #机器ip
     }