前端跨域代理服务器

通过在VueCLI的vue.config.js中配置devServer的proxy属性,可以实现8080服务器作为代理,转发带有/api的请求到3000服务器,避免跨域问题。代理服务器起到了中介作用,接收浏览器请求,转交至正确服务器并返回数据。

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

1.代理服务器

因为我们的项目是启动在8080服务器端口

 

它要直接调用我们自建的3000服务器端口的数据就会产生跨域,

那么我们可以让8080服务器去请求3000服务器数据,而不是之间调用,

然后8080返回请求的数据转发给浏览器,便不会跨域

此时8080服务器便是代理服务器了,

2.开发模式跨域

1.在项目中创建一个vue.config.js文件

vue.config.js

module.exports = {
  // devServer 开发服务器
  devServer:{
    proxy:{
      // 专门访问/api 地址的都用代理进行操作
      '/api':{
        // 代理的真正服务器
        target:'http://localhost:3000',
        // 因为我们真正的axios请求没有api这个地址,所以要对我们自己axios请求地址进行重写
        // 匹配到/api字符串然后把它替换成 :
        pathRewrite:{
          '^/api':""
        }
      }
    }
  }
}

devServer 为vue Cli 里面的配置属性 ,用来开发服务器 配置参考 | Vue CLI

2. 改变我们的全局配置的js文件

 

3. 总结:什么是服务器代理

 

我们发现最后banner发起的请求是http://localhost:8080/api/banner,最终访问的是8080服务器端口

因为我们在全局配置的js文件里面将我们的开发环境后台地址改成了/api/,于是我们的每一次请求都会是http://localhost:8080/api/,

此时我们的每一次请求都会把请求地址追加到http://localhost:8080/api/后面,变成了http://localhost:8080/api/banner

但是我们在步骤1的vue.config.js里面规定了只要是带有/api 的请求地址,全部都进行服务器代理,把真实请求的服务器指向 http://localhost:3000/api/

然后有对/api进行了重写,让/api字符串为空,最后的真实请求地址变为http://localhost:3000

此时我们的banner请求便为http://localhost:3000/banner 此时便可以请求到3000服务器端口的数据了,

然后我们的8080服务器转发这些数据到浏览器

相当于8080服务器是一个中间人,浏览器问它要数据,它说我没有,但是它可以去向3000服务器借,借到的数据再给浏览器,

这就是服务器代理

### 解决前端问题的代理服务器配置 在开发环境中,为了应对CORS(资源共享)带来的挑战,一种常见的做法是在前端项目中配置代理服务器。这使得即使前后端不在同一名下工作,也能让浏览器认为这些请求来自同一个源[^1]。 #### 使用 `http-proxy-middleware` 配置 Vue 开发服务器代理 对于基于 Vue CLI 构建的应用程序来说,可以通过安装并设置 `http-proxy-middleware` 来实现这一目标: ```bash pnpm i http-proxy-middleware --save-dev ``` 接着,在项目的根目录创建或编辑现有的 `vue.config.js` 文件,加入如下代码片段以定义代理规则: ```javascript module.exports = { devServer: { proxy: { '/api': { // 所有以 /api 开头的 URL 将被重定向到目标地址 target: 'http://localhost:3000', // 后端 API 的实际位置 changeOrigin: true, // 更改主机头部为目标URL pathRewrite: {'^/api' : ''} // 移除路径中的/api前缀 } } } }; ``` 上述配置意味着当客户端尝试访问 `/api/some/path` 这样的路由时,实际上会向 `http://localhost:3000/some/path` 发送请求;而这一切都发生在后台,对开发者而言几乎是透明的过程[^4]。 这样做的好处在于无需修改现有API接口调用方式即可轻松绕过由浏览器施加的安全限制,同时也简化了开发流程,尤其是在调试阶段非常有用[^3]。 #### 实际应用案例 假设存在一个位于 `http://localhost:8080` 上运行的Vue应用程序以及一个提供RESTful服务的Node.js Express服务器处于 `http://localhost:3000` 。如果没有适当处理,则从前者发起至后者的HTTP GET 或 POST 请求可能会遭遇错误提示。但是按照上面介绍的方法设置了代理之后,所有指向 `/api/*` 的请求都会自动转发给 Node.js 应用,并且由于它们看起来像是从相同的来源发出的一样,因此不会触发任何 CORS 错误消息[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值