最近換了份工作,離開了唯品會,想不到新的工作第一份任務還是做管理系統,真憂傷~
新的管理系統是前后端代碼分離的,還搞了不同的域,真操蛋,
本地開發階段
本地開發階段還是比較愉快的,在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