webpack 反向代理解决前后端分离跨域问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zwkkkk1/article/details/81541057

  这算是第一次实打实遇到跨域问题，之前做的东西都是用后台MVC框架进行渲染前端页面，加上之前准备面试题都只是知道个大概是个什么东西，这才在这次的前后端分离练习中遇到了这个问题。

具体啥是跨域问题，为了不喧宾夺主，这里不进行介绍，有兴趣的可以看看下面的两篇文章：
浏览器同源政策及其规避方法
前后端分离跨域问题解决方案

还有，项目是要使用 webpack 和 webpack.devServer 进行配置的，如果不想在项目中配置，下面的部分可以不用看了~

问题

---

举个栗子，前端项目可能会运行在 http://localhost:8080，我的Node.js后端api服务器是在 http://localhost:3000 下启动的。

前端程序想要请求后端接口 /register（注册），程序会报下面的错误：

POST http://localhost:8080/register 404 (Not Found)

想来也正常，我的后端服务器是在 3000 端口下启动的，你访问 8080 怎么能访问到呢。那我们来改一下，前端访问 http://localhost:3000/register 直接指定端口号，然后会报下面的错误：

Failed to load http://localhost:3000/register: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.

这就是跨域问题，不同的端口号也会引起跨域问题，解决方案一般有三种：JSONP，CORS，反向代理，这里我们用第三种 反向代理。

webpack.devServer

官网地址：devServer.proxy
http-proxy-middleware（内部是用这个包实现的，有些高级用法也可以看这里的文档）

打开 webpack.config.js

module.exports = {
    ...,    //其他配置不列了
    devServer: {
        ...,    //其他配置不列了
        proxy: {
            //在这里配置~~~
        }
    }
}

可以这样配置：

proxy: {
  "/api": "http://localhost:3000"
}

这样就可以跨域访问到了，不同的是前端请求以及后端api都要加一个 /api，即原地址 /register， 都改成 /api/register。

也可以这样配置:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

这样的配置，就是后端api地址可以只要原来的 /register，前端请求的地址还是要改成 /api/register.