鍍金池/ 問答/HTML/ 前端頁面發(fā)送請求post方式出錯，打印的是Access-Control-Allo

前端頁面發(fā)送請求post方式出錯，打印的是Access-Control-Allow-Origin ...

后端 express

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

前端 axios

import axios from 'axios'
axios.defaults.baseURL = "http://localhost:5001"
var formdata = new FormData();
formdata.append('file', f);
axios({
    url: '/',
    method: 'post',
    data: formdata,
    headers: {'Content-Type': 'multipart/form-data', 'Access-Control-Allow-Origin': '*'}})
    .then(function (res) {
         console.log(res)
    })
    .catch(function (err) {
         console.log(err)
    })

圖片描述

圖片描述

在express這個代碼上已經(jīng)加了 app.all這套響應(yīng)頭代碼，
在前端發(fā)送請求為什么還那樣問題？

回答
編輯回答
囍槑

----- update

我有點半瓶水亂晃的意思了。

剛剛使用 express 測試了一下， xhr 對象也會觸發(fā)預(yù)檢。

fetch 也會觸發(fā)預(yù)檢，之前答的是錯誤的。

2017年8月26日 09:12
編輯回答
網(wǎng)妓

你express監(jiān)聽的端口是5001？端口正確的話建議你用cors包

// npm install cors
let cors = require('cors')
app.use(cors())
app.post('/', function (req, res, next) {
  console.log(111)
})
2018年8月30日 06:53
編輯回答
懶洋洋

我建議檢查一下設(shè)置有沒有生效，打開 network 面板看一下 response header 先。

2017年1月24日 07:15
編輯回答
淡墨

非簡單請求和后端設(shè)置問題
給你過一遍流程
你請求的時候設(shè)置了Access-Control-Allow-Origin
所以請求變成了非簡單請求 瀏覽器會先發(fā)出預(yù)檢OPTIONS請求
攜帶請求頭信息會多出下面 （你的請求為例）

Access-Control-Request-Headers: access-control-allow-origin
Access-Control-Request-Method: POST
Origin: http://你的地址

結(jié)果你服務(wù)端設(shè)置了res.header('Access-Control-Allow-Headers', 'Content-Type');
沒有支持access-control-allow-origin
所以預(yù)檢沒通過
拋出錯誤Request header field ser is not allowed by Access-Control-Allow-Headers in preflight response.

1) 刪掉前端的 Access-Control-Allow-Origin 變成簡單請求 你前端設(shè)置的Access-Control-Allow-Origin也沒啥作用
2) 設(shè)置后端 res.header('Access-Control-Allow-Headers', 'Content-Type,Access-Control-Allow-Origin');

2017年9月2日 10:13