Question

我已经为我的React网站创建了一个API，以使用fetch获取/上传图像。它适用于PC和Android手机，在用户表示无法在iPhone / iPad上使用Safari之前，不必费心检查Safari。

插入Macbook，发现上传文件时出现CORS错误：

Origin https://xxxxxxx is not allowed by Access-Control-Allow-Origin

有趣的是，当页面加载时，它正在调用相同的API来检索现有图像，并且效果很好。我的API是PHP，我已经在顶部添加了以下行：

header("Access-Control-Allow-Origin: https://xxxxxxx");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Allow-Headers: X-Requested-With, Accept, Content-Type, Origin, Content-Length, Accept-Language, Host, User-Agent, Referer, Accept-Encoding, Connection");

基础设施人员发誓他们已经开放WAF允许上传（我相信他们是因为PC / Android手机可以工作）

我已经尝试在iPhone上使用Chrome，但这也不起作用。

所有提取都通过以下方式进行：

    const API_URL = 'api_url'; 
    const customFetcher = async (formData) => {

    let response = fetch(API_URL, {
        method: 'POST',
        body: formData,
        mode: 'cors'
    })
    .then(r => {
        console.log('custom', r.status);
        if (r.status === 205) {
            throw new Error('Session expired');
        } else {
            return r;
        }
    });
    return response;
  }

  export default customFetcher;

引发CORS错误的上传抓取：

let formData = new FormData();
formData.append('auth', this.props.user.state.token);
formData.append('key', 'le_key')
formData.append('what', 'upload');
formData.append('userId', this.props.user.state.userId);
formData.append('serialNo', this.state.serialNo + '|' + this.state.firstName + '|' + this.state.lastName)
formData.append('photo', this.state.selectedFiles[0]);

customFetcher(formData)
...

获取现有图像的抓取：

let formData = new FormData();
            formData.append('auth', this.props.user.state.token);
            formData.append('key', 'le_key')
            formData.append('what', 'photo');
            formData.append('userId', this.props.user.state.userId);
            formData.append('serialNo', this.state.serialNo + '|' + this.state.firstName + '|' + this.state.lastName);


        customFetcher(formData)
        .then(r => {
            if (r.status !== 404) {
                return r.blob();
            } else {
                this._setNoImage();
                return false;
            }
        })

进度： OK，发现如果我从文件输入中拍摄一张新照片，它会起作用！表示它正在发送一个空文件，如果我从文件浏览器中进行选择，则会导致此错误。

因此，现在的问题是我如何能够获取所选文件？我这样做：

<FormControl 
        type="file"
        onChange={this._updateFile}
 />

_updateFile = (e) => {
    this.setState({
        selectedFiles:  e.target.files[0]
    })
}

我什至尝试检查文件大小，但是它很好，以某种方式仍然没有发送任何内容。有任何想法吗？ TIA

Answer 1

好吧，案件结案，我的Infra团队阻止了它...

我不太确定他们做了什么，但是除了将网站列入白名单之外，他们还必须增加允许的内容长度。

对不起，如果我不能给出更好的解释，不熟悉网络工具。

使用FormData上传图像进行抓取在iOS上无效，但在Android / PC上有效

1 个答案: