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
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版

Js代码  收藏代码
$.ajax({  
  url : 'xxx',  
  xhrFields: {  
    withCredentials: true // 设置运行跨域操作  
  },  
  success : function(data) {  
    console.log(data);  
  }  
});  
 

 

Methods3：fetch（部分浏览器不兼容，不建议使用）

Js代码  收藏代码
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);  
}  
 

Methods4: axios.js跨域：

Js代码  收藏代码
axios(url, {  
  method: 'GET',  
  mode: 'no-cors',  
  headers: {  
    'Access-Control-Allow-Origin': '*',  
    'Content-Type': 'application/json',  
  },  
  withCredentials: true,  
  credentials: 'same-origin',  
}).then(response => {  
})