vue cli下fetch请求不了?

Question

题目描述

fetch.js用的网上很通用的一个如下代码

题目来源及自己的思路

代码中配合 async 和 await请求遇到一些问题

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
import { baseUrl } from './env'

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {

type = type.toUpperCase();
url = baseUrl + url;

if (type == 'GET') {
    let dataStr = ''; //数据拼接字符串
    Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&';
    })

    if (dataStr !== '') {
        dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
        url = url + '?' + dataStr;
    }
}

if (window.fetch && method == 'fetch') {
    let requestConfig = {
        credentials: 'include',
        method: type,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        mode: "cors",
        cache: "force-cache"
    }

    if (type == 'POST') {
        Object.defineProperty(requestConfig, 'body', {
            value: JSON.stringify(data)
        })
    }
    
    try {
        const response = await fetch(url, requestConfig);
        const responseJson = await response.json();
        return responseJson
    } catch (error) {
        throw new Error(error)
    }
} else {
    return new Promise((resolve, reject) => {
        let requestObj;
        if (window.XMLHttpRequest) {
            requestObj = new XMLHttpRequest();
        } else {
            requestObj = new ActiveXObject;
        }

        let sendData = '';
        if (type == 'POST') {
            sendData = JSON.stringify(data);
        }

        requestObj.open(type, url, true);
        requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        requestObj.send(sendData);

        requestObj.onreadystatechange = () => {
            if (requestObj.readyState == 4) {
                if (requestObj.status == 200) {
                    let obj = requestObj.response
                    if (typeof obj !== 'object') {
                        obj = JSON.parse(obj);
                    }
                    resolve(obj)
                } else {
                    reject(requestObj)
                }
            }
        }
    })
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

接口地址连接超时,并且连参数都传不过去

Answer 1

options请求是cors跨域并且发送非简单请求时，浏览器自动发送的preflight request(预检请求), 报TIMEOUT,极有可能是你的后端没有处理好cors跨域，正确处理这个options请求
假设你的后端是用koa写的，请安装使用koa cors中间件https://github.com/koajs/cors; 如果后端不是koa，可以参照koa cors源码，正确处理options请求; 或直接搜索你使用的框架的cors包，安装使用.