vue +nginx 解决跨域的问题

最新推荐文章于 2025-06-11 18:13:15 发布

原创

最新推荐文章于 2025-06-11 18:13:15 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #跨域 #nginx #proxyTable

本文记录了一次在Vue开发中遇到的跨域问题及其解决方案。通过Nginx作为代理，解决了开发环境中的跨域限制。首先介绍了跨域产生的原因，接着详细讲述了如何配置Vue的proxyTable和Nginx，包括Nginx的下载、端口设置、代理配置以及配置文件的修改。最后提到了配置更改后需重启Nginx以使配置生效。

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

记录一次在开发的时候遇到跨域问题

技术栈：vue nginx

首先要弄清楚跨域的产生原因，请自行百度。清楚以后开始配置：

再开发环境的时候不推荐后端去设置允许跨域。至于为什么，请自行百度。找度娘准没错的。。。

首先，下载nginx-window http://nginx.org/en/download.html

其次找到vue配置代理的地方：

proxyTable: { 
      '/api': { 
        target: 'http://127.0.0.1:80/', //源地址 
        changeOrigin: true, //是否跨域
        ws:true,
        pathRewrite: { 
          '^/api': '/' //路径重写 
          } 
      } 
    },

这里解释一下，127.0.0.1:80是nginx的端口，原理就是通过nginx代理来解决跨域问题的

然后调用方法的路径为：

url: '/api/auth/authenticate

注意通过上面配置以后，这里的/api则表示的是http://127.0.0.1:80/，即相当于访问的地址是：

http://127.0.0.1:80//auth/authenticate

此时已经代理到nginx上了，然后去配置nginx，路径是：conf文件夹下的nginx.conf，配置如下：