跨域报错信息:
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 => {
})