vue设置代理实现跨域，与jq用nginx设置代理实现跨域

最新推荐文章于 2025-07-15 09:27:25 发布

_六月

最新推荐文章于 2025-07-15 09:27:25 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： vue nginx 跨域

本文链接：https://blog.youkuaiyun.com/qq_33242730/article/details/79911421

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用Vue配置代理来实现跨域请求，以及讲解了Nginx服务器设置代理路径的方法，包括在Vue的config/index.js中配置代理和在Nginx的nginx.conf文件中修改location实现跨域。请注意，这些操作需在服务器环境下进行，如Vue通过npm run dev启动，Nginx启动应用程序，并确保端口号正确配置。

一、vue。
vue跨域很简单，估计内部配置过反代服务器了，直接配置代理就行了
config目录下的index.js文件

proxyTable: { // 设置代理
        '/api':{  // 代理名称
            target: 'http://...',    // 目标地址
            changeOrigin: true,  
            pathRewrite: {   // 重定向
                '^/api': ''  
            }  
        }
    }
// 组件中使用
axios({
            method: 'get',
            url: '/api/...',
        })

二、nginx
首先去官网下一个nginx服务器http://nginx.org/，我的是解压版的1.13.1。

这里写图片描述
config目录下找到nginx.conf配置文件，里面有一个默认的location

location / {
            root   html;
            index  index.html index.htm;
        }

在下面添加一个代理路径

location /apis { #添加访问目录为/apis的代理配置
            rewrite  ^/apis/(.*)$ /$1 break;  #重定向
            proxy_pass  http://.../;  #目标地址
        }

前端请求

$.ajax({
        url: '/apis/...',
        method: 'get',
        success: function(data){
            console.log(data)
        },
        error: function(err){
            console.log(err)
        }
    })

注意：要在服务器环境下运行，vue端npm run dev启动，nginx运行应用程序启动，端口号在配置文件设置。