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

墨蓝 2022-05-17 09:45 257阅读 0赞

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

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

还有，项目是要使用 `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`.

[Link 1]: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
[Link 2]: https://blog.csdn.net/zhang6622056/article/details/75221492
[devServer.proxy]: https://www.webpackjs.com/configuration/dev-server/#devserver-proxy
[http-proxy-middleware]: https://github.com/chimurai/http-proxy-middleware