场景

使用webpack-dev-server驱动前端项目时,开发工程中由于访问的webpack-dev-server启动的本地服务器，当前端工程中需要使用服务端api时（特别是服务端api如果再有一些权限验证的过程，比如要使用cookie做登陆判断），不能自动将cookie携带过去，api验证过程失败。

解决方法

使用nginx代理，设置一个合法的cookie。

具体实现

假设webpack-dev-server启动端口 127.0.0.1:8888
服务端api地址 : api.test.net
路由：/v1/user

本地nginx启动 127.0.0.1:9999来代理127.0.0.1:8888 使用到的api请求

webpack配置

devServer: {
    host: 'localhost', 
    port: 8888, //webpack-dev-server启动端口
    proxy: {    //代理配置，此处是将所有/v1/*请求通过 nginx代理，具体代理规则可以通过nginx配置设置
    '/v1/*': {
      target: 'http://127.0.0.1:9999' //代理服务器地址 ，此处使用nginx代理
    }
  }
},

nginx配置

upstream serverApi {
   api.test.net;
}
server {
  listen 9999; #代理服务器端口
  server_name  localhost; #域名

  access_log  /var/nginx/logs/access.log  main;
  error_log  /var/nginx/logs/error.log;
  location / { #路由规则 代理所有请求到api.test.net
       proxy_pass  http://serverApi;
       proxy_set_header Cookie 'token="12344566"'; #设置http头，指定cookie, 具体可查看nginx相关文档
   }
}