前端配置反向代理proxyTable

芳草斜阳_晨光

已于 2022-07-26 16:09:55 修改

阅读量1.1k

点赞数

文章标签：前端 javascript vue.js webpack

于 2022-07-26 16:09:30 首次发布

本文链接：https://blog.csdn.net/daishu_shu/article/details/125994633

版权

本文介绍了在Vue项目开发中如何使用proxyTable解决跨域问题。proxyTable允许我们在本地开发环境中设置反向代理，绕过浏览器的同源策略。详细讲解了proxyTable的配置方法，包括如何指定目标接口域名、是否跨域以及处理没有统一项目名的接口。同时，解释了proxyTable的原理，即通过本地服务器转发请求，避免同源策略限制。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、为什么要使用proxyTable

浏览器有同源策略，不允许跨域访问，所谓跨域就是（协议、域名、端口其中任何一个不同就是跨域）
在平时项目的开发环境中，经常会遇到跨域的问题。比如需要和某个后端同事进行本地联调，就需要用到反向代理来解决两台计算机之间的跨域问题。

二、如何使用proxyTable处理数据的函数和方法。

我们还是拿vue相关的项目举例（目前用的技术栈是vue），首先要找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用，自然的是要配置在dev里面：

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {
      	// target表示目标接口域名
        target: 'www.666.com', //举个例子具体要看后端给的
        // target: 'http://172.20.225.45:9033/api/zy/rental/house/web/',  //需要和哪个后端连接调试就在这里新增修改
        // target: 'http://192.168.209.123:9033/api/zy/rental/house/web/',
        changeOrigin: true // 是否跨域
      }
    },
    host: '0.0.0.0', // 本地访问
    // host: 'localhost',
    port: 8086,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,

    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

三、接口地址没有统一项目名的时候

如果后台返给我们前端的接口没有了统一的项目名如何处理呢？如下，先人为给接口地址前面加上一个自定义的项目名，再重写接口

//先人为给接口地址前面加上一个自定义的项目名
let someApi = '/api' + '/xx/xx';

dev: {
  ...
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/'   //重写接口
      }
    }
  }
  ...
}

四、关于proxyTable的原理

同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。vue-cli的proxyTable用的是http-proxy-middleware中间件，该中间件本质上是在本地开了一个服务器dev-server，所有的请求都通过这里转发出去，即把浏览器的发送请求代理转发到代理服务器上，再由代理服务器发送请求给目标服务器，从而解决跨域问题。
在这里插入图片描述

遇到跨域问题的场景有很多，不仅web端、小程序同样也有。解决方案也是多种多样，如jsonp、cors、websocket、nginx反向代理，也包括上面用到的node中间件代理等。实际的项目开发中，更多是使用代理来避免同源策略。