Js设置前端允许跨域请求后端API:Access-Control-Allow-Credentials
 

跨域报错信息:

Console代码  

Fetch API cannot load https://xxx.com/api. Response to preflight   

request doesn't pass access control check:   

The value of the 'Access-Control-Allow-Credentials' header   

in the response is '' which must be 'true'   

when the request's credentials mode is 'include'.   

Origin 'https://xxx.com' is therefore not allowed access.  

 


Method1:纯js


export function Cors(url) {  

  return new Promise((resolve, reject) => {  

    const xhr = new XMLHttpRequest();  

    xhr.open('GET', url, true);  

    xhr.withCredentials = true; // 设置运行跨域操作  

    xhr.send();  

    xhr.onload = () => {  

      const text = xhr.responseText;  

      if (xhr.status === 200) {  

        resolve(JSON.parse(text));  

      } else {  

        let error = new Error(text);  

        error.response = xhr;  

        reject(error);  

      }  

    };  

  });  

}  

 


Methods2:jQuery版


$.ajax({  

  url : 'xxx',  

  xhrFields: {  

    withCredentials: true // 设置运行跨域操作  

  },  

  success : function(data) {  

    console.log(data);  

  }  

});  

 


 


Methods3:fetch(部分浏览器不兼容)


export function Get(url) {  

  const config = {  

    method: 'get',  

    headers: {  

      'Accept': 'application/json',  

      'Content-Type': 'application/json'  

    },  

    credentials: 'include'  

  };  

  return fetch(url, config)  

    .then(checkStatus)  

    .then(parseJSON);  

}