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

295 阅读1分钟

跨域报错信息:
Console代码  收藏代码
Fetch API cannot load 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 '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 => {  
})