【跨域】vue设置代理实现跨域、nginx设置代理实现跨域

最新推荐文章于 2025-09-18 18:57:31 发布

转载最新推荐文章于 2025-09-18 18:57:31 发布 · 1.2k 阅读

本文介绍如何通过配置Vue项目及Nginx服务器来解决跨域问题。具体包括：在Vue项目中设置代理服务器，并在Nginx中配置代理路径以实现跨域访问。

一、vue设置代理实现跨域

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

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

二、nginx设置代理实现跨域

添加一个代理路径

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)
        }
    })

【提示】这里面用的是JQuery。用vue的axios发请求与上面的类似！