最近换了份工作,离开了唯品会,想不到新的工作第一份任务还是做管理系统,真忧伤~
新的管理系统是前后端代码分离的,还搞了不同的域,真操蛋,
本地开发阶段
本地开发阶段还是比较愉快的,在webpack配置proxy即可,配置如下
let context = ['/auth', '/myAccount', '/user', '/role', '/resource', '/task', '/enum', '/draft'] Config.devServer = { historyApiFallback: true, publicPath: '/static/', disableHostCheck: true, noInfo: true, hot: true, host: 'localhost', proxy: [{ context: context, target: 'http://11.112.0.100:9750', changeOrigin: true, secure: false }, { context: '/file', target: 'http://11.112.0.100:9742', changeOrigin: true, secure: false }], port: 8099, watchOptions: { poll: false, ignored: ['node_modules/**', 'config/**', 'common/**', 'dist/**'] }, headers: { 'Access-Control-Allow-Origin': '*' } };
测试环境
刚开始后端还没配置服务请求地址过滤,就报跨域限制了,在后端设置了cors之后,发现登录请求发了两次,
而且第一次还是options请求
而登录跳转其他页面全线报错;
看代码并没发现发了options请求,而是都发了post请求,
查了资料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS发现是由于请求都变成了复杂请求,浏览器机制是复杂请求先发options请求,返回2**之后
才会自动再发一次options请求的,
简单请求需要符合
1、get/post/head请求
2、content-type 为text/plain、multipart/form-data、application/x-www-form-urlencoded
而由于此系统是使用application/json做数据交互的,因此为复杂请求,需要先发个options