cors 启用 axios 获取请求失败答案

【问题标题】：cors enabled axios get request getting failedcors 启用 axios 获取请求失败
【发布时间】：2020-07-08 04:18:16
【问题描述】：

有 2 个 api。方法 POST-Login 方法 GET-data。并且服务器启用了cors。登录 api 工作正常，但是当使用 GET 方法调用 api 时失败。代码：

->api 登录-POST

const login = async (email, password) => {
  console.log("in auth service");
  const userDetail = {
    username:email,
    // email,
    password
  };

  try {
    // unsetHeadersWithUserToken();
    const afterSuccess = await api.post(apiDetail.auth.url,  userDetail); 

    if (afterSuccess) {
      return afterSuccess.data;
    }
  } catch (error) {
    console.log("error: ", error.response.error);
    if (error.category === 'User Permissions') {
      // forceLogout();
    }
    throw error;
  }
};

->api-GET

try{
    // console.log("url : ", apiDetail.partnerLocations.url);
let token = sessionStorage.getItem('token');
setHeadersWithUserToken(token);
    let apiResponse = await api.get(apiDetail.partnerLocations.url);
    return apiResponse;
}catch(error){
    console.info('##### demand-response.js:11 #####');
    console.info('========================= Start =========================');
    console.error('error = ', JSON.stringify(error));
    // console.log(error.response.data)
    console.info('========================== End ==========================');
    throw error;
}

->axios 调用

   import axios from 'axios';
import { environment } from '../../utils/constants';

let api;
let apiDetail = {
  baseURL: environment.baseURL,
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
};
const setAPI = apiDetail => {
  api = axios.create(apiDetail);
};
setAPI(apiDetail);
const setHeadersWithUserToken = token => {
  api.defaults.headers.common['Authorization'] = token;
};
export {
  api,
  setHeadersWithUserToken,
};

图像-1 显示控制台错误

Image-2 网络呼叫响应

【问题讨论】：

您的请求标头中似乎有access-control-allow-origin: *。它需要在您的服务器响应标头中。
@BryanElliott 为此使用 chrome 扩展，收到此错误“对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态”
是的，服务器响应需要在标头中有access-control-allow-origin: *。（响应头，不是请求头）

标签： javascript cors axios

【解决方案1】：

试试这个

const proxyurl = "https://cors-anywhere.herokuapp.com/"
cosnt url = 'Your URL'
axios.get(proxyurl + url)

我遇到了同样的问题，而且效果很好。

【讨论】：

【解决方案2】：

将“代理”属性（位于此处底部）添加到 package.json：

"proxy": "http://localhost:<PORT-GOES-HERE>"

现在，不要像这样发出 HTTP 请求：

axios.get("http://localhost:8080/example")

你应该这样写：

axios.get("/example")

【讨论】：

您可以为 Chrome 安装 CORS 插件（“Moesif COR”S 或“允许 CORS”），也可以添加前端域以允许后端主机。
chrome 扩展适用于 POST 请求，但不适用于 GET 请求。