鍍金池/ 問答/HTML/ webpack跨域問題 options請求返回204 No Content？

webpack跨域問題 options請求返回204 No Content？

  1. 技術棧為：webpack+vue+express，程序直接在開發(fā)環(huán)境下運行沒有問題。然后打算將前后端代碼分離，并將項目配置到生產環(huán)境下，所以webpack直接打包到dist目錄下，然后將index.html和static目錄放到了nginx的靜態(tài)目錄中,訪問: http://localhost ,可以看到登錄界面，但是執(zhí)行登錄卻發(fā)出了一條options請求，并返回了204 No Content。
  2. 問題是：為什么沒有出現登錄的post請求，而只有options請求？如何處理這種前后端分離的跨域問題。
  3. 已有的處理：前端使用的axios網絡庫，并已經加入了 axios.defaults.withCredentials = true; ；后端使用了cors庫，代碼為：app.use(cors({credentials: true}));
  4. 問題截圖如下：圖片描述
回答
編輯回答
法克魷

204 是正常的。OPTIONS 返回 200 和 204 都是通過。至于為什么 POST 沒發(fā)出來就不清楚了…看看有沒有報錯吧。

補充

如何處理前后端分離開發(fā)時的跨域問題：
使用 webpack 配置中的 devServer.proxy 進行代理，比如：

proxy: {
  '/api': {
    target: 'http://example.com'
  }
}


axios('/api/users') // 在檢查器里看到發(fā)送給 localhost/api/users，實際發(fā)送給 example.com/api/users
2018年8月26日 01:29
編輯回答
她愚我

自己更新下。
webpack跨域的問題已解決。
解決方案：前端axios部分必須在axios引入的地方開啟 axios.defaults.withCredentials = true;，
后端部分沒有使用vue-cli推薦的proxyTable方案，而使用了cors庫

cors具體配置為：

app.use(cors({
    origin: 'http://127.0.0.1', //webpack打包后會生成index.html和static目錄，我直接放在本地啟動的nginx靜態(tài)目錄html下用來運行webpack打包文件，所以Origin地址為http://127.0.0.1 
    allowedHeaders: 'Origin, x-requested-with, Content-Type, X-Token', //X-Token為自定義的頭字段
    credentials: true //設置成true 請求中才會帶上cookie信息，否則請求失敗
}));
2018年5月21日 14:29