使用fetch 进行请求出现的问题

:8080/#/ohho:1 Failed to load http://test.houd.cn:8081/rest/api/test/async/: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access.

这个是由于自己设置了fetch 的credentials 为include 导致的
具体的知识点
https://developer.mozilla.org/zh-CN/docs/Web/API/Request/credentials

omit: 从不发送cookies.
same-origin: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.
include: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.

使用的话在服务器配置这个参数为true
在nginx 中的配置

add_header 'Access-Control-Allow-Credentials' 'true';

现在项目中fetch.js 中的配置

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', # 如果服务端不需要 浏览器cookies 的话 ，可以不写， 一般用在登录过就不许要登录，自动登录
            method: type,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
            mode: "cors",
            // mode: "no-cors", // 如果不使世界跨域通过的话， 设置为 no-cors 但是responnse 中是没有值得
            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)
                    }
                }
            }
        })
    }
}

服务端nginx 配置如下

服务短配置

总结使用fetch 进行请求，需要前端请求配置和后端的配合的

vue 使用fetch 出现问题解决以及相应知识学习

使用fetch 进行请求出现的问题

fetch 相关学习

相关应用资料

猜你喜欢

vue 使用fetch 出现问题解决以及 相应知识学习

使用fetch 进行请求出现的问题

fetch 相关学习

相关应用资料

猜你喜欢

vue 使用fetch 出现问题解决以及相应知识学习