前端页面发送请求post方式出错，打印的是Access-Control-Allow-Origin ...

Question

后端 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这个代码上已经加了 app.all这套响应头代码，
在前端发送请求为什么还那样问题？

Answer 1

非简单请求和后端设置问题
给你过一遍流程
你请求的时候设置了Access-Control-Allow-Origin
所以请求变成了非简单请求 浏览器会先发出预检OPTIONS请求
携带请求头信息会多出下面 （你的请求为例）

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

结果你服务端设置了res.header('Access-Control-Allow-Headers', 'Content-Type');
没有支持access-control-allow-origin
所以预检没通过
抛出错误Request header field ser is not allowed by Access-Control-Allow-Headers in preflight response.

1) 删掉前端的 Access-Control-Allow-Origin 变成简单请求 你前端设置的Access-Control-Allow-Origin也没啥作用
2) 设置后端 res.header('Access-Control-Allow-Headers', 'Content-Type,Access-Control-Allow-Origin');

Answer 2

----- update

我有点半瓶水乱晃的意思了。

刚刚使用 express 测试了一下， xhr 对象也会触发预检。

fetch 也会触发预检，之前答的是错误的。

Answer 3

你express监听的端口是5001？端口正确的话建议你用cors包

// npm install cors
let cors = require('cors')
app.use(cors())
app.post('/', function (req, res, next) {
  console.log(111)
})

Answer 4

我建议检查一下设置有没有生效，打开 network 面板看一下 response header 先。