前端配置跨域代理

最新推荐文章于 2026-04-30 12:22:53 发布

原创

最新推荐文章于 2026-04-30 12:22:53 发布 · 2k 阅读

标签

#前端

收录于

本文介绍了前端解决跨域问题的两种方法：通过中间件http-proxy-middleware和使用webpack/dev配置代理。讲解了http-proxy-middleware的配置，包括target、changeOrigin和pathRewrite等选项，并提到了webpack.devServer的代理配置。这些代理配置帮助绕过浏览器的同源策略，实现跨域数据交互。

跨域时对于前后端开发中一个非常常见的问题，当我们客户端向我们的服务器请求接口数据的时候，我们可以请求到服务器当中的数据，但是我们把数据返回我们的客户端的时候就会产生跨域问题

所以，跨域是针对我们浏览器设置一个安全策略，就是当我们的协议，域名和端口只要有一个不同，那么就会产生跨域问题，也被称为同源策略

大多数的请求下，我们只需要在后端配置cors就可以解决跨域问题，也就是我们需要依赖后端才能解决跨域问题，cors是一种机制，该机制就是使用http头来告诉我们浏览器，允许运行在一个源上的web应用访问不同源上的资源，除了cors方案外，还可以配置代理来解决跨域问题

前端配置跨域代理有来个那种方式

使用中间件 http-proxy-middleware 配置跨域代理

安装 http-proxy-middleware

npm install http-proxy-middleware --save-dev

在 src 目录下新建 setupProxy.js 文件

const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
    app.use('/httpServer', createProxyMiddleware({
        target: 'http://10.0.0.0：8080',//后端服务器地址
        changeOrigin: true,