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

阅读更多

跨域报错信息：

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);
}

 

Methods4: axios.js跨域：

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

 

更多实例应用扫码体验：