场景
使用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相关文档
}
}