javascript - 如何克服 ReactJS 中的 CORS 问题

Question

我正尝试在我的 React 应用程序中通过 Axios 进行 API 调用。但是，我在浏览器上遇到了这个 CORS 问题。我想知道我是否可以从客户端解决这个问题，因为我没有任何内部 API 访问权限。附件是我的代码。

const response = axios({
  method: "post",
  dataType: "jsonp",
  url: "https://awww.api.com",
  data: {
    appToken: "",
    request: {
      applicationName: "ddfdf",
      userName: "jaime@dfd.com",
      password: "dfd",
      seasonIds: [1521ddfdfd5da02],
    },
  },
});

return {
  type: SHARE_REVIEW,
  payload: "response",
};

附件是我的WebPack.config.js

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname,
    publicPath: "/",
    filename: "bundle.js",
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["react", "es2015", "stage-1"],
        },
      },
      { test: /\.json$/, loader: "json-loader" },
    ],
  },
  resolve: {
    extensions: ["", ".js", ".jsx"],
  },
  devServer: {
    historyApiFallback: true,
    contentBase: "./",
  },
  node: {
    dns: "mock",
    net: "mock",
  },
};

Answer 1

我从“TraversyMedia”的教程中找到的最简单的方法是只需使用 https://cors-anywhere.herokuapp.com在 'axios' 或 'fetch' api 中

https://cors-anywhere.herokuapp.com/{type_your_url_here} 

例如

axios.get(`https://cors-anywhere.herokuapp.com/https://www.api.com/`)

在您的情况下将 url 编辑为

url: 'https://cors-anywhere.herokuapp.com/https://www.api.com',